使用 Vue js 調用 axios 發布請求時出現 CORS 和網絡錯誤

Question

調用 axios 發布請求時出現錯誤。 但它在 postman 上正常工作。

我用於調用請求的代碼是

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());

Answer 1

在你的后端使用這個：

npm i cors

並在您的快速后端入口點中：

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

Answer 2

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

Answer 3

您正在本地主機上運行前端並使用一些端口。 此外，您的后端在 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/",
    })
  );
};

不要忘記將此文件中的端口更改為您服務器的端口。