preflight 错误，但服务端告诉你已经设置过了 CORS 信息怎么办

开发过程遇到一个问题

异步去一个 cdn 上请求一个自定义 JSON 格式的文件报了一个 preflight 错误

has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status

但当我在开发者工具内直接使用 fetch(url) 去请求这个文件时却可以正常返回。

服务端开发人员告诉我已经设置过允许跨域的信息了..

查了一下资料发现，当请求是非“简单”请求时，浏览器会先触发预检测 pre-flgith, 就是我们常在异步请求前看到的 OPTIONS 请求

Request Method: OPTIONS

所以当遇到 preflight 错误时，会感受到浏览器完全没有发起任何请求，就报错。

分析原因： 我当前项目中的所有请求都由 axios 做了拦截层，会带上自定义的信息比如授权的 token 版本号等。且 header 是以 application/json 格式返回

所以我项目中的所有请求都是非 “简单” 请求

解决方案

调整 axios 请求的配置，避免发送预检请求：

1. 确保不使用任何会触发预检的请求方法（如 PUT, DELETE, CONNECT 等）。
2. 避免在请求中设置任何非简单请求头部。

将 Content-Type 设置为 text/plain，或不设置，直接使用 fetch(url)

如果是 axios 可以像下面这样尝试：

axios.get('http://example.com/data.json', {
  headers: {
    'Content-Type': 'text/plain'
  }
})