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/

而不是附加dev服务器行：

http://localhost:8081/api/v1/

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

---

不确定代理为什么不起作用

无法代理外部URL。将axios中的基本URL更改为

/api/v1/

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

---

Nuxt提供了一个代理选项，可用于避免cors错误，

---

有关更多信息和可用选项，请参阅此文件

它不是我的后端（它是客户端后端）。我不确定后端技术。但这仍然应该是正确的。。？我的意思是代理请求（无论后端是什么）ok。然后我得到以下错误

431（请求头字段太大）

检查正在发送的请求头。这应该有助于解决问题。它是相同的：

标题：{Accept:“application/json”，Authorization:“TOKEN 3413413dfdsfsafd3rr41”，}