如何修复 vue axios CORS 问题？

Question

如何防止 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/而不是附加 dev server 行：http://localhost:8081/api/v1/

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

Answer 1

外部 URL 不会被代理。将 axios 中的基本 URL 更改为/api/v1/

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