跨域问题整理
1.为什么会有跨域问题
原因是浏览器为了安全,而采用的同源策略(Same origin policy)
2.什么是同源策略
- 同源策略是由Netscape提出的一个和著名的安全策略,现在所有支持javascript的浏览器都会使用这个策略
- web是构建在同源策略基础上的,浏览器只是针对同源策略的一种实现
- 所谓同源是指:协议,域名(IP),端口 必须完全相同,即只有三者都相同才能算是在一个域里
备注:规则列举如下(已有网站地址为:http://daily.wu123.com)
请求地址 | 形式 | 结果 |
---|---|---|
http://daily.wu123.com/test/a.html | 协议,域名,端口均相同 | 成功 |
http://daily.wu123.com/user/a.html | 协议,域名,端口均相同 | 成功 |
http://a.daily.wu123.com/test/a.html | 域名不同 | 失败 |
http://pre-daily.wu123.com/test/a.html | 域名不同 | 失败 |
http://daily.wu123.com:8080/test/a.html | 端口号不同 | 失败 |
https://daily.wu123.com/test/a.html | 协议不同 | 失败 |
非同源情况下的请求会受到以下限制:
- 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
- 无法接触非同源网页的 DOM
- 无法向非同源地址发送 AJAX 请求
但是要明确以下几点:
- 跨域只存在于浏览器端,不存在于安卓/ios/Node.js/python/ java等其它环境
- 跨域请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了
3.CORS解决跨域问题
(还有其他跨域解决方案,略)
CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS是官方的跨域解决方案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持get和post请求。
**CORS的工作原理:**CORS是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览器收到该响应以后就会对响应放行。核心逻辑在于:给响应头设置Access-Control-Allow-xxxxx字段,表示服务端支持某些域名可以访问,如:
- “Access-Control-Allow-Headers”,“准许的请求头字段”
- “Access-Control-Allow-Credentials”, “true”
- “Access-Control-Allow-Origin”, ‘准许访问的域名(ip)’
- “Access-Control-Allow-Methods”, ‘准许的请求方式’
- “Access-Control-Max-Age”, “验证的时间”
4.遇到的跨域问题案例分析
分析:允许访问的域名(ip)中不包含‘http://localhost:3000’
解决方案:本地hosts劫持个域名‘xxx.wu123.com’,代理到http://localhost:3000
分析:Access-Control-Allow-Header 不包含 domain-key 这个字段
解决方案:加上这个字段
分析:跨域配置重复了,运维nginx中配置了允许https://www.wu123.com 这个域名,开发在代码中配置了允许 *
解决方案:开发去掉代码中的跨域配置,跨域统一走运维nginx配置
4.未配置跨域
解决方案:nginx配置 include crossDomain.conf
分析:nginx上跨域配置中OPTIONS请求没有return 204,请求到服务,服务未配置跨域,导致跨域的报错
解决方案:nginx跨域配置中增加判断,OPTIONS请求return 204