时间戳

首页 > 解决方案 > 如何解决 vue axios CORS 问题？

vue.js - 如何解决 vue axios CORS 问题？

问题描述

如何防止 vue axios 出现 CORS 问题？

以下是使用 vue 和 axios 向后端发出请求的代码。

axios.config.js

/// here I'm creating a vue axios instance.

import axios from "axios";

export default axios.create({
  baseURL: "https://example.com/api/v1/",
  headers: {
    Accept: "application/json",
    Authorization: "TOKEN 3413413dfdsfsafd3rr41",
  },

});

和里面vue.config.js

我已经代理了请求。

module.exports = {
  devServer: {
    proxy: {
      "/api/*": {
        target: "http://localhost:8081",
        secure: false,
        changeOrigin: true,
      },
    },
  },
};

在我的 vuex 商店中，我正在调用一个动作：

import axios from 'axios.config'

  actions: {
    getData({ commit }) {
      axios
        .get(`products/grocery`)
        .then((res) => {
          console.log("res :", res);
          commit("SET_DATA", res.data);
        })
        .catch((e) => {
          console.log("e :", e);
          commit("SET_ERROR", e);
        });
    },
}

但是当我在控制台中查看请求时，我可以看到它正在向原始 url 发送请求，https://example.com/api/v1/而不是附加开发服务器行：http://localhost:8081/api/v1/

不知道为什么代理不起作用！

标签： vue.js

解决方案

Nuxt 提供了一个代理选项，您可以使用它来避免 cors 错误， Nuxt 文档

您可以参考这里以获取更多信息和可用选项@nuxt/proxy

推荐阅读