使用Vue js调用axios发布请求时出现CORS和网络错误答案

【问题标题】：getting CORS and network error while calling axios post request using Vue js使用Vue js调用axios发布请求时出现CORS和网络错误
【发布时间】：2021-03-26 21:10:47
【问题描述】：

我在调用 axios 发布请求时遇到错误。但它在邮递员上工作正常。

我用来调用请求的代码是

methods : {
     displayData(){
        var config = {
            method: 'post',
            url: 'http://localhost:5000/api/request/displayRequest',
            headers: { 
                'Content-Type': 'application/json'
            },
        data : JSON.parse(JSON.stringify(this.user._id))
        };

            axios(config)
            .then(function (response) {
            console.log(JSON.stringify(response.data));
            })
            .catch(function (error) {
            console.log(error);
            });
        },
    async mounted(){
        this.displayData()
    }

我已经在 server.js 的后端实现了 CORS

// Cors Middleware
const cors = require('cors');
app.use(cors());
app.options("*", cors());

【问题讨论】：

标签： node.js mongodb vue.js axios cors

【解决方案1】：

在你的后端使用这个：

npm i cors

在您的快速后端入口点中：

const cors = require("cors");
app.use(cors());
app.options("*", cors());

【讨论】：

我已经在后端使用了这段代码@babakabadkheir

【解决方案2】：

您正在本地主机上运行您的前端并使用一些端口。此外，您的后端在 localhost 端口 5000 上运行。但是由于 CORS 策略，您的前端应用程序无法访问任何其他端口。如果您使用的是 Node JS，则可以在后端解决此问题。通过以下命令安装cors：

npm i cors

然后在您的服务器文件上，更改您的应用程序

app.use(cors());

注意如果你使用 React js，你可以使用 http-proxy-middleware。只需在 src 目录中创建一个名为“setupProxy.js”的文件。并添加以下行。

const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
    app.use(
    "/api",
    createProxyMiddleware({
      target: "http://localhost:5000/",
    })
  );
};

不要忘记将此文件中的端口更改为您服务器的端口。

【讨论】：

【解决方案3】：

app.use(
  cors({
    origin: (origin, callback) => callback(null, true), // you can control it based on condition.
    credentials: true, // if using cookie sessions.
  })
);

【讨论】：

这并没有提供问题的答案。要批评或要求作者澄清，请在其帖子下方发表评论。
@Clijsters cmets 里面的代码，够了！