现象：

通过抓包看到在部分客户端上跨域的非简单请求只发送一个预检的OPTIONS请求，之后的真实请求并没有发送。

出现问题的环境：

部分IOS低版本系统。

windows系统微信内必现（2020-04-29）。

分析

通过上面条件OPTIONS请求发送成功，但是实际请求没有发送，可以推断出是服务端相关HTTP头没有设置正确，导致客户端认为服务端不允许当前源上的web应用跨域访问该资源，所以后面真正的请求没有发送（fetch的表现为status: 0）。

服务端响应头如下：

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: *

正常来说不存在问题，因为设置的值也都是合法的，并且在绝大部分客户端上都是正常的。

CORS定义：

CORS跨域资源共享，是通过额外的HTTP头来告诉浏览器，源上的web应用被允许访问来自不同源服务器的指定资源。

这里额外的HTTP头值得注意，可以看出来CORS在不同的浏览器上可能是有兼容性问题。

方案

一开始的猜想是HTTP请求的method的值OPTIONS被客户端错误设置为小写，导致服务端异常。但是通过抓包看到OPTIONS请求正确返回（status: 204），并且后端日志中并未收到小写的OPTIONS请求。所以这个排除。

然后着眼于服务端返回的相关HTTP头

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: *

本地复现出来，并排查是因为Access-Control-Allow-Headers: * 导致的，这个属性有某些兼容性问题。

Access-Control-Allow-Headers: *

MDN中介绍 Access-Control-Allow-Headers: * 有两重意思。

一个是在服务端设置Access-Control-Allow-Credentials: true的时候这个 * 只会被客户端当做字符串 * （我们不希望的，会出错的）。

另一个是没有这个设置则会被当做通配符（我们希望的，不会出错的）。

猜测是客户端对于 * 的实现上有兼容性问题，所以建议不要这样设置，用到什么设置什么最好，例如：Access-Control-Allow-Headers: Content-Type。

之后成功排除了问题。

结论

Access-Control-Allow-Headers: * 在部分客户端上有兼容问题。

注：跨域错误是不会暴露给JS的，就意味着 try{}catch(corsError){corsError.message}拿不到错误的具体信息，不太好在没有控制台的环境看到问题。

Access-Ctrol-Allow-Headers:*兼容问题导致的跨域失败相关推荐

Nginx完美解决前后端分离端口号不同导致的跨域问题
Nginx完美解决前后端分离端口号不同导致的跨域问题参考文章: (1)Nginx完美解决前后端分离端口号不同导致的跨域问题 (2)https://www.cnblogs.com/PyKK2019/p ...
authorization 传就跨域_JavaScript 使用 headers Authorization 存放 token 出现跨域错误？...
在设置了 headers 请求头中的 Authorization 后出现了这个问题请求异常 Failed to load http://host:port/auth/user/updatePassw ...
ajax post请求导致的跨域和浏览器兼容性问题
前言过完年来我们老大安排我做的一个小需求,就是往现有的.net客服查询系统增加一个二级菜单,点击菜单在对话框中输入账号信息即可查询到该用户的信息.当时做这个的时候遇到了一些问题,具体可查看解决了异常 ...
【笔记】跨域重定向中使用Ajax（XHR请求）导致跨域失败
背景: 1.前端Web中有两个域名,a.com和b.com,其中a.com是访问主站(页面),b.com是数据提交接口的服务器(XHR请求) 2.a.com中用XHR调用b.com/cerate[没有 ...
nginx转发导致的跨域问题
我们这个系统是 A前端项目通过访问接口,先跳转到nginx ,再由nginx转发到B项目,A系统.nginx地址.B系统均属于不同的域名. nginx跨域配置 server { listen 80 ...
关于跨域 Response to preflight request doesn‘t pass access control check
做项目的时候由于访问了不同的服务器,然后导致了跨域问题,报错情况为: has been blocked by CORS policy: Response to preflight request do ...
webmvcconfigurer配置跨域_为什么加了 Spring Security 会导致 Spring Boot 跨域失效呢？...
点击上方 IT牧场 ,选择置顶或者星标技术干货每日送达作者:欧阳我去链接:https://segmentfault.com/a/1190000019485883 作为一个后端开发,我们经常遇到 ...
前后端分离跨域问题Access to XMLHttpRequest at ‘http://localhos...has been blocked by CORS policy: No ‘Access-
完整报错如下: Access to XMLHttpRequest at 'http://localhost:8081/login' from origin 'http://localhost:8084 ...
阿里云OSS跨域报错：Access to XMLHttpRequest at ‘...‘ ... blocked by CORS policy: No ‘Access-Control-Allow
错误标签:阿里云OSS, 跨域请求, No 'Access-Control-Allow-Origin' 浏览器具体报错内容: Access to XMLHttpRequest at 'https:// ...

Access-Ctrol-Allow-Headers:*兼容问题导致的跨域失败

现象：

出现问题的环境：

分析

CORS定义：

方案

Access-Control-Allow-Headers: *

结论

Access-Ctrol-Allow-Headers:*兼容问题导致的跨域失败相关推荐

最新文章

热门文章