如何解决fetch配合async/await发送跨域请求时的CORS报错问题

错误原因 #

• CORS的Access-Control-*系列头属于服务端响应头，必须由接口提供方的服务返回，你在客户端请求头中添加这些配置完全不生效，属于对CORS工作机制的误解。浏览器的跨域校验逻辑是基于服务端返回的响应头判断的，客户端没有权限跳过该校验。

常见解决方式 #

你不需要必须自己搭建Node服务，可根据使用场景选择对应方案：

仅本地调试使用 #

• 给浏览器添加启动参数禁用安全策略，以Chrome为例，快捷方式目标后追加--disable-web-security --user-data-dir即可关闭跨域校验，仅适合本地开发阶段使用。
• 用浏览器跨域解除插件，也就是你当前在用的方案，同样不适合普通用户访问。

可用于生产环境的方案 #

• 使用公开CORS代理服务：将你的目标接口地址拼接到代理服务地址后即可直接请求，代理服务会在返回结果中追加允许跨域的响应头，不需要你自行维护后端服务。
• 自行搭建中转服务：可以用Node、或者各类云平台的Serverless/边缘函数做中转，前端请求你自己的中转接口，由服务端请求xkcd接口后将结果返回给前端，服务端之间的请求不存在CORS限制，该方案稳定性最高，完全可控。

注意 #

不存在完全不依赖任何第三方服务/后端的纯前端生产级跨域方案，CORS本身就是浏览器层面的安全限制，纯前端代码无法绕过。

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