10分钟入门跨域，10分钟入门nginx跨域配置代理转发和CORS

本文目录

前言

这段是废话，比较急的可以直接看下面正题。
跨域问题一直是开发人员比较困扰的问题，我们常常求助于他人来解决，一旦解决就不管了，导致当没人救你的时候你就尴尬了，然后就开始疯狂的stackoverflow。总归治标不治本，特此整理一份我对于跨域的理解和认识，希望能给需要的人一些帮助。

10分钟入门跨域

什么是跨域, 为何会出现

本段重点
1. 由于浏览器的同源策略，非同源资源访问，会导致跨域
2. 只有浏览器端(包括webView)会有跨域问题
3. 不同浏览器厂商同源策略不同
4. 是不是所有非同源资源访问都会产生跨域问题？我的回答：ajax都会，src属性加载资源不会。

简单的说就是，从站点A获取站点B站点的资源时，两个站点域或端口时，就会出现跨域现象。

相信这是令你头疼的报错： No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://xxxxxxx.com’ is therefore not allowed access.

那么为什么会出现跨域现象，原因是浏览器的同源策略，这个同源策略同样应用到iframe访问，简单的解释就是如果不这么做就会存在一定的安全问题，但即便这么做也不能完全解决安全问题，至于哪些问题大家自行查阅别的资料，本文重点还是解释下跨域。

注意: 不同浏览厂商的安全策略有所差异，本文基于Chrome为主进行讲解。

另外需要说明的一点是： 跨域问题是存在于浏览器端（包括app内的webView）的，也就是只有web中才会遇到跨域问题，其他服务端是没有跨域这个说法的，服务端调用接口是可以任性的。

所有非同源资源访问都会产生跨域问题吗？
我的回答是： ajax请求都会产生跨域问题，script、link、img标签的src引用是不会有跨域问题的。

什么是跨域请求

本段重点
1.跨域请求报错时，responseText是已返回给浏览器，而浏览器否决了本次请求并抛出异常，在xhr中达不到readyStatus===4&&status===200的状态并拿不到responseText 。
2.我们所看到浏览器抛出的异常是浏览器自身基于安全策略抛出的
3.当发生跨域情况时，前端通常不需要做什么，看业务情况可以加一个xhr.withCredentials=true。需要后端服务端或代理转发层加一下跨域头，具体怎么加可以参考本文后半篇。

理解了什么是跨域，就来说说跨域请求，其实是一个东西，我特意分开讲只是为了更好理解。

比较官方的说法是：

当一个资源从与该资源本身所在的服务器不同的域或端口不同的域或不同的端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

那么讲到这里，我们能够理解什么是跨域请求了，那么大家疑惑的问题是何时发生跨域，何处报的错误。

我的直接回答是：浏览器自身报的错，报错的时间是请求响应回来时。浏览器发出一个请求，无论是否跨域，请求都是能正常发出的，也是正常返回的。当浏览器在得到响应时会做一些处理，如果该请求是属于跨域请求，那浏览器会检查响应的报文头中是否有响应的跨域头，若没能找到应该有的头信息，就直接让这个请求报错。另外，这时候的responseText其实浏览器已经拿到了，只是没有给js。

这里我们看一个具体的请求从浏览器发出到接受到响应：