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

Posted 2023-03-04

【中文标题】使用 axios cors 策略错误配置 nodejs rest api 服务器和 vue 项目

【英文标题】：configure nodejs rest api server and vue project with axios cors policy error

【发布时间】：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 代理

我很高兴它成功了！我稍后会创建一个答案

【参考方案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 问题应该消失