React中调用带Basic Auth的外部API出现CORS问题该如何解决？

报错原因 #

你添加Authorization请求头后，原本的简单请求变为非简单请求，浏览器会自动发送OPTIONS预检请求校验跨域权限，该外部API没有返回符合要求的CORS响应头，因此触发报错。不需要Basic Auth的请求属于简单请求，无需预检，所以可以正常调用。

是否必须搭建后端服务 #

不一定，分两种场景判断：

• 如果你可以控制该外部API的配置，不需要额外搭建服务，直接调整API的CORS规则即可
• 如果你无法修改外部API的配置，必须新增一层代理中转请求，不一定是自己搭建Express服务，有更轻量化的生产可用方案

生产环境可用解决方案 #

方案1：修改外部API的CORS配置（最优）

直接在外部API的服务端新增以下CORS响应头配置即可：

• Access-Control-Allow-Origin：设置为你前端生产环境的域名（不能用通配符*，带身份凭证的请求不支持通配符）
• Access-Control-Allow-Headers：添加Authorization到允许的请求头列表
• Access-Control-Allow-Credentials：设置为true

同时调整你的fetch代码，添加credentials配置，浏览器原生支持btoa做Base64编码，无需引入额外的base64库：

const fetchBusVendors = async () => {
  const url = 'https://externalapi.com'
  const username = 'test'
  const password = 'test'

  const headers = new Headers();
  headers.append('Authorization', 'Basic ' + btoa(username + ":" + password));

  const res = await fetch(url, {
    headers: headers,
    credentials: 'include'
  });

  const data = await res.json();

  return data;
};

方案2：新增代理层中转请求（适用于无法修改外部API的场景）

所有方案均生产环境可用，不需要依赖开发环境的代理配置：

• 边缘函数代理：使用Cloudflare Workers、阿里云函数计算等Serverless服务，写少量代码做请求中转，前端请求先发到边缘函数，边缘函数携带Authorization头请求外部API，再将结果返回给前端，后端请求没有同源限制，天然避免CORS问题
• Nginx反向代理：你部署React前端的服务一般都会配置Nginx，直接新增一条location规则，将API路径的请求转发到外部API地址，前端直接请求同域路径，不会触发跨域
• 自建后端服务：如果有业务需要可以搭建Express等后端服务，新增路由做请求转发，逻辑和边缘函数方案一致

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