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/，而不是将开发服务器行附加到以下内容：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",
  },
});

Answer 2

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

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

如何解决vue axios CORS问题？

2 个答案: