为何仅查询字符串存在差异的API调用会触发CORS跨域错误？

路径XYZ与ABC是否导致CORS错误 #

路径中的XYZ和ABC本身不会直接触发CORS错误，CORS策略默认不会校验请求路径的路由部分，只有两种情况会和路径相关：

• 服务端对/api/XYZ/*路径单独配置了和全局规则不一致的CORS策略，覆盖了全局配置
• /api/XYZ/query接口处理请求时抛出异常，未正常返回CORS响应头，浏览器就会报CORS错误

错误实际原因排查方向 #

1. 客户端请求头配置错误 #

Access-Control-Allow-Origin是服务端返回给客户端的响应头，你在客户端请求头中手动添加该字段属于自定义请求头，会触发浏览器的预检OPTIONS请求。如果服务端没有正确处理该路径的预检请求，或者该请求头不在允许的请求头列表中，就会导致CORS校验失败。

修复方案：删除axios配置中'Access-Control-Allow-Origin': this.baseURL()这行代码。

2. 服务端CORS配置存在无效项 #

WithOrigins中填写的https://api.test-site.com/api是无效的Origin值，Origin仅包含协议、域名、端口三部分，不包含路径，该项配置不会生效，建议删除。
同时需要确认CORS中间件的注册顺序在路由匹配之前，否则如果接口先抛出异常，不会走CORS中间件添加响应头。

3. 异常请求存在参数错误导致接口报错 #

你无法正常请求的URL中存在重复参数startDate&startDate=01/06/2021，第一个startDate没有赋值，重复且不符合规范的参数可能导致服务端解析参数失败，抛出400/500类错误，异常响应通常不会携带CORS头，浏览器就会优先报CORS错误，隐藏实际的接口报错。

排查方法：打开浏览器控制台网络面板，查看该请求的实际响应状态码即可确认。

4. 预检请求未正确处理 #

你在GET请求中添加了Content-Type: application/json头，该头不属于CORS安全头，会触发预检OPTIONS请求，需要确认服务端正确处理了/api/XYZ/query路径的OPTIONS请求，返回了符合要求的CORS响应头。

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