本地Node.js应用通过Axios调用远程服务器时遭遇CORS跨域问题求助

嗨，我碰到了一个跨域的麻烦事，想请大伙帮忙分析分析！

我有个本地Node.js应用，之前用Axios连接本地服务器一切正常，现在要切换到部署好的远程服务器，代码里的API调用是这样写的：

let apiCall = "https://api.myproduct.io/api/all";

console.log("making axios call to " + apiCall);

const resp = await axios
.get(
apiCall,
{
headers: {
APIKey: config.API_KEY,
'Access-Control-Allow-Origin': '*'
},
},
{ crossdomain: true, credentials: "same-origin" }
)
.then((response) => {
console.log("axios response " + response);
return response;
})
.catch((e) => {
return e;
});

return resp;

同时我的vue.config.js配置了代理：

module.exports = {
devServer: {
proxy: "https://api.myproduct.io",
},
transpileDependencies: ["vuetify"],
};

但部署到AWS之后，用Axios发起GET请求时出现了CORS错误：

making axios call to https://api.myproduct.io/api/all
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at https://api.myproduct.io/api/all. (Reason:
CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 301.

奇怪的是，用Postman和我的移动端APP调用这个API都完全正常，只有本地环境会报错，这到底是哪里出问题了呀？

可能的问题排查和解决方案： #

• 先纠正一个小误区：请求里别加Access-Control-Allow-Origin头
  这个头是服务器返回给浏览器的响应头，不是你在请求里发送的！你现在把它放在请求headers里完全没用，反而可能添乱，先删掉这个头试试。

• 检查代理配置是否真的生效（本地环境）
  你在vue.config.js里配置了代理，但代码里直接写了完整的远程API地址，这样代理根本不会起作用！本地开发时应该用相对路径调用，比如把apiCall改成/api/all，这样devServer才会把请求代理到https://api.myproduct.io，绕过浏览器的CORS限制。

  修改后的API调用代码：

  let apiCall = "/api/all"; // 改用相对路径
  

• 301重定向的问题要重视
  错误里提到状态码是301，说明你的请求被重定向了，可能是https://api.myproduct.io/api/all这个地址需要跳转到其他路径（比如带www/不带www，或者路径大小写问题）。Postman会自动跟随重定向，但浏览器在跨域场景下对重定向的CORS检查更严格，你可以先确认远程API的正确最终地址，直接用这个地址发起请求，避免重定向环节。

• 确认远程服务器的CORS配置
  虽然Postman和移动端没问题，但浏览器的CORS机制更严格。你需要确认远程服务器是否正确配置了Access-Control-Allow-Origin头，允许你部署后的AWS域名（或者本地开发的localhost:xxxx）访问。如果服务器只允许特定域名，那你的本地环境域名不在允许列表里就会报错。

• 关于credentials: "same-origin"的设置
  如果你不需要携带cookie之类的凭证，这个设置可以直接去掉；如果确实需要的话，服务器那边还要额外配置Access-Control-Allow-Credentials: true，并且Access-Control-Allow-Origin不能用*，必须指定具体域名。

先试试前面几个简单的调整，比如去掉请求里的无用头、改用相对路径走代理，看看能不能解决问题！

备注：内容来源于stack exchange，提问作者sonoerin