如何在Chrome控制台fetch请求头添加Access-Control-Allow-Origin解决CORS报错

• Access-Control-Allow-Origin 是服务端返回的响应头，不是客户端需要设置的请求头，你在fetch的headers里加这个字段完全无效，反而属于自定义请求头，会触发额外的预检校验。
• 你当前是在 origin 为 https://www.google.com 的页面发起请求，但是服务端CORS配置里只允许 http://example.com 来源的请求，不在允许列表的源会直接被CORS策略拦截。
• 你的请求配置满足触发预检请求的条件：设置了credentials: 'include'、自定义了Content-Type: application/json值（不在CORS安全头范围内），浏览器会先发OPTIONS预检请求，你当前的接口只配置了GET路由的CORS，没有对OPTIONS请求做正确的CORS响应。
• 带凭据的跨域请求，服务端CORS配置必须显式开启credentials: true，否则即使源匹配也会被拦截。

1. 调整服务端CORS配置 #

修改express代码，补充必要的CORS参数，将origin替换为你实际发起请求的页面源：

var express = require('express')
var cors = require('cors')
var app = express()

var corsOptions = {
    origin: 'https://www.google.com', // 测试阶段也可以临时设为true允许所有源
    credentials: true, // 允许带凭据的请求
    optionsSuccessStatus: 200 
}

// 全局启用CORS，自动处理OPTIONS预检请求
app.use(cors(corsOptions))

app.get('/products/:id', function (req, res, next) {
    res.json({ msg: 'This is CORS-enabled for only example.com.' })
})

app.listen(80, function () {
    console.log('CORS-enabled web server listening on port 80')
})

2. 调整客户端fetch请求代码 #

删掉多余的Access-Control-Allow-Origin请求头：

fetch("http://localhost/products/1", {   
  credentials: 'include', 
  headers: {
    'Content-Type': 'application/json'
  },
}).then(req => req.text()).then(console.log)

临时测试替代方案 #

如果只是临时验证接口可用性，不需要读取返回内容，可以把请求模式改成no-cors，只会返回不透明响应：

fetch("http://localhost/products/1", { mode: 'no-cors' })

内容的提问来源于stack exchange，提问作者Cyrus the Great