跨域问题整理
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
