使用 axios cors 策略错误配置 nodejs rest api 服务器和 vue 项目答案

【问题标题】：configure nodejs rest api server and vue project with axios cors policy error使用 axios cors 策略错误配置 nodejs rest api 服务器和 vue 项目
【发布时间】：2021-02-26 14:03:14
【问题描述】：

正如标题所说，我正在尝试配置一个运行节点 js 的本地 rest api 服务器，同时我有一个带有 axios 的 vue 项目。我浏览了整个互联网，尝试了每个服务器/客户端配置、服务器头设置、cors 包、axios 头配置，但我仍然在控制台中有 cors 策略错误。邮递员通过调用 localhost:3000/everyapiPOSTorGet 来工作，但来自浏览器的 axios 却没有。每个人都可以指出一些可行的解决方法吗？

这是我的实际节点配置：

const express = require("express");
const PORT = process.env.port || 3000;
const apiRouter = require('./routes');
const app = express();

app.use(express.json())
app.use('/', apiRouter)

// CORS middleware

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header(
        "Access-Control-Allow-Headers",
        "Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Request-Method"
    );
    res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");
    res.header("Allow", "GET, POST, OPTIONS, PUT, DELETE");
    next();
})

app.listen(PORT, () => {
    console.log("Server is listening on port: ", PORT);
});

谢谢！

编辑：我忘了说显然 vue 项目在 localhost:8080 或 8081 上（取决于我是否有更多项目正在运行）和服务器在 localhost:3000

【问题讨论】：

maybe this can help
你使用vue-cli吗？
如果您使用vue-cli，您可以通过setting up proxy 避免CORS 问题。在您的示例中，您可以使用此devServer: { port: 8080, proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, } } },。这意味着如果您拨打localhost:8080/api，呼叫将被代理到您的后端localhost:3000/api
谢谢 ljubadr 它有效！，我不知道 vue cli 代理
我很高兴它成功了！我稍后会创建一个答案

标签： node.js vue.js axios cors

【解决方案1】：

即使您的问题是如何配置和修复 CORS 错误，我们实际上可以在本地使用 webpack devServer proxy setting 完全跳过 CORS

在您的项目根目录中使用 vue-cli you need to update vue.config.js 文件。如果您没有此文件，请创建它

module.exports = {
  "devServer": {
    "port": 8080,
    "proxy": {
      "/api": {
        "target": "http://localhost:3000",
        "changeOrigin": true
      }
    }
  }
}

8080 是您的前端端口 (vue)，3000 是您的后端端口 (nodejs)

本次更新后请务必重启vue-clinpm run serve查看代理效果

此设置的作用是，如果您调用 http://localhost:8080/api/...，调用将被代理到您的后端 http://localhost:3000/api/...，并且 CORS 问题应该消失

【讨论】：