Angular请求本地Node.js Express接口出现CORS跨域错误如何解决？

1. Node.js侧问题修复 #

你当前的Node服务存在三个核心问题：多套CORS配置冲突、origin放行规则错误、缺少POST请求体解析中间件。

修复后的完整app.js代码 #

const express = require('express')
const app = express()
const port = 3000
const cors = require('cors')

// 仅保留一套CORS配置，必须放在所有路由之前
app.use(cors({
  origin: 'http://127.0.0.1:4200', // 放行运行在4200端口的Angular前端地址
  allowedHeaders: ["Authorization", "Content-Type"],
  methods: "GET,POST,OPTIONS",
  credentials: true
}))

// 必须添加JSON解析中间件，否则无法读取POST请求的JSON格式body
app.use(express.json())

app.get('/', (req, res) => {
  res.send("服务运行正常")
})

app.get('/getAPIResponse', (req, res) => {
  // 注意补全api_helper的定义逻辑，原代码中该变量未声明
  api_helper.make_API_call('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    res.json(response)
  })
  .catch(error => {
    res.send(error)
  })
})

app.post('/api/postData', (req, res) => {
  console.log("/postData 请求接收成功");
  console.log(req.body); 
  // 必须返回响应，否则前端会触发超时未知错误
  res.json({code:200, msg:"请求成功", data: req.body})   
})

app.listen(port, () => console.log(`NodeJS App listening on port ${port}!`))

2. 代理方案使用说明（可选，无需配置CORS） #

你已经编写了代理配置，但存在两处错误导致代理不生效：

• Angular请求写了完整的远端路径，不会走本地代理，需要改成相对路径
• 代理配置的pathRewrite会把路径中的/api前缀删除，转发到后端的路径会变成/postData，和你后端的/api/postData路由不匹配

修复步骤 #

1. 调整proxy.conf.json，删除多余的pathRewrite配置：

{
  "/api/*": {
    "target": "http://127.0.0.1:3000",
    "secure": false,
    "changeOrigin": true
  }
}

2. 修改Angular的请求路径为相对路径：

getData(loc : any) {
  const headers = new HttpHeaders()
        .set('Authorization', 'my-auth-token')
        .set('Content-Type', 'application/json');
  // 改用相对路径，走本地代理转发
  this.http.post<any>("/api/postData", loc, {headers}).subscribe(response =>{
    console.log(response);
  }, err => {
    console.error('请求错误：', err)
  }); 
}

3. 启动Angular时添加代理参数：

ng serve --proxy-config proxy.conf.json

3. 注意事项 #

• CORS配置和代理方案二选一即可，不要同时启用，避免二次校验冲突
• 测试阶段可以临时把CORS的origin改为*放行所有源，生产环境必须指定明确的前端地址

内容的提问来源于stack exchange，提问作者apyy