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

Posted 2023-02-22

【中文标题】使用Vue js调用axios发布请求时出现CORS和网络错误

【英文标题】：getting CORS and network error while calling axios post request using Vue js

【发布时间】：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());

【参考方案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 里面的代码，够了！