配置Access-Control-Allow-Credentials为true仍报跨域凭证错误如何解决

问题1：已配置A、CNAME记录，为什么请求还是会被判定为跨站请求？ #

A记录和CNAME记录仅用于域名的DNS解析指向，和浏览器跨域判定逻辑没有关联。浏览器同源策略的判定依据是请求地址和当前页面地址的协议、域名、端口三者完全一致，只要有一个属性不匹配就会被判定为跨域。你前端站点运行在https://sp-poc.com，后端服务部署在其他域名下，哪怕做了域名解析指向，只要实际请求的目标域名和前端域名三者不完全一致，就会触发跨域校验。

问题2：已在响应头返回Access-Control-Allow-Credentials: true，为什么还是无法通过跨域校验？ #

你可以按照以下顺序排查：

• 先处理OPTIONS预检请求：带withCredentials: true的跨域POST请求发送前，浏览器会先发送OPTIONS类型的预检请求，目前你仅为POST接口配置了CORS响应头，没有处理OPTIONS请求的响应头，预检失败会直接抛出跨域错误，不会执行后续的实际POST请求。
• 检查Access-Control-Allow-Origin头配置：带身份凭证的跨域请求不允许该头取值为*，必须显式指定和前端一致的域名，即https://sp-poc.com，不能包含多余的路径后缀或通配符。
• 修正Swift响应头赋值逻辑：你当前的代码是直接全量覆盖response.headers为仅包含Access-Control-Allow-Credentials的数组，会丢失其他必要的CORS头配置，建议改为在原有响应头的基础上追加CORS相关字段，而不是直接替换全部头信息。
• 检查代理层是否修改了响应头：如果后端服务前有Vercel反向代理，要确认代理层没有移除或覆盖你后端返回的CORS头，可以直接在浏览器开发者工具的网络面板中查看实际返回的响应头，确认是否存在Access-Control-Allow-Credentials: true。
• 修正axios参数写法：axios.post()的第二个参数是请求体，第三个参数才是配置项，你当前把headers放在第二个参数的对象中是无效的，需要挪到第三个参数的配置对象里，否则跨域相关的请求头不会被正确发送，正确示例如下：

axios.post(
  `loginEmail`,
  {}, // 第二个参数放请求体，空的话填空对象
  {
    withCredentials: true,
    headers: {
      crossDomain: true,
    }
  }
)

内容的提问来源于stack exchange，提问作者János