新手调用带认证外部API遇CORS拦截，设no-cors返回401求助

先纠正你代码里的错误 #

Access-Control-Allow-Origin是服务器返回的响应头，不是前端请求可以设置的。你把它加在请求头里完全无效，浏览器会直接忽略这个字段，甚至可能触发额外的预检请求导致拦截。

为什么会遇到CORS错误 #

浏览器的同源策略会限制前端页面从不同域名、端口或协议的服务器获取数据。你调用的外部API没有配置允许你当前页面域名的Access-Control-Allow-Origin响应头，所以浏览器直接阻止了请求。既然你无权修改这个API，前端直接调用的路子走不通。

为什么mode: no-cors会导致401 #

设置这个模式后，浏览器会跳过CORS检查，但请求会变成不透明响应（opaque response）——你无法读取响应内容，而且浏览器会自动屏蔽一些自定义请求头（比如你的X-AMC-Vendor-Key），服务器因为收不到合法的验证密钥，自然返回401未授权错误。

可行的解决方法（无需修改外部API） #

因为改不了目标API，只能通过代理中转绕过浏览器的同源限制：

1. 开发环境用本地代理

以React项目为例，在src目录下创建setupProxy.js：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://xxxxxxx', // 替换成你的API域名
      changeOrigin: true,
      pathRewrite: { '^/api': '' } // 去掉请求路径里的/api前缀
    })
  );
};

之后前端请求改成：

fetch("/api", {
  method:"GET",
  headers: {
    'Content-type' : 'application/json',
    "X-AMC-Vendor-Key": "xxxxxxxxx"
  }
})
// ...后续逻辑不变

代理会把你的本地请求转发到目标API，因为是服务器之间的请求，不受浏览器同源策略限制。

2. 生产环境用反向代理（比如Nginx）

配置Nginx的转发规则：

location /api {
  proxy_pass https://xxxxxxx;
  proxy_set_header Host xxxxxxx;
  proxy_set_header X-AMC-Vendor-Key "xxxxxxxxx";
}

前端请求/api路径，Nginx会帮你转发到目标API，同样绕过CORS限制。

3. 自己写后端中转接口

用Node.js写个简单的中转服务：

const express = require('express');
const fetch = require('node-fetch');
const app = express();

app.get('/proxy-api', async (req, res) => {
  try {
    const apiRes = await fetch('https://xxxxxxx', {
      method: 'GET',
      headers: {
        'Content-type': 'application/json',
        'X-AMC-Vendor-Key': 'xxxxxxxxx'
      }
    });
    const data = await apiRes.json();
    res.json(data);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

app.listen(3001, () => console.log('中转服务运行在3001端口'));

前端直接调用这个中转接口fetch('http://localhost:3001/proxy-api')，因为是同域名请求，不会触发CORS。

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