Web跨域请求与解决方法

1. 什么是跨域请求

  跨域请求就是指：当前发起请求的域与该请求指向的资源所在的域不同时的请求。这里的域指的是这样的一个概念：我们认为如果 “协议 + 域名 + 端口号” 均相同，那么就是同域。

2. 浏览器的同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也是最基本的安全功能。出于安全考虑，浏览器限制从JS脚本发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API都遵循同源策略。

域名、协议、端口有一个不同就不是同源，三者均相同，这两个网站才是同源
DOM 层面的同源策略：限制了来自不同源的”Document”对象或 JS 脚本，对当前“document”对象的读取或设置某些属性
Cookie和XMLHttprequest层面的同源策略：禁止 Ajax 直接发起跨域HTTP请求（其实可以发送请求，结果被浏览器拦截，不展示），同时 Ajax 请求不能携带与本网站不同源的 Cookie。
同源策略的非绝对性：$<script><img><iframe><link><video><audio>$等带有src属性的标签可以从不同的域加载和执行资源。
其他插件的同源策略：flash、java applet、silverlight、googlegears等浏览器加载的第三方插件也有各自的同源策略，只是这些同源策略不属于浏览器原生的同源策略，如果有漏洞则可能被黑客利用，从而留下XSS攻击的后患
因为同源策略的限制，不同协议(http、https)、域名或者端口无法直接进行JS ajax请求。 同源策略只针对于浏览器端，浏览器一旦检测到请求的结果的域名不一致后，会堵塞请求结果。这里注意，跨域请求是可以发去的，但是请求响应response被浏览器堵塞了。
那么问题又来了，如果恶意网站使用这个方法伪造一个转账请求，是不是就可以得逞了呢？答案是否定的。因为同源策略限制了不同源脚本之间的访问，也就是说恶意js脚本无法获取用户在银行网站的Cookie（网站身份验证的token会短期存放在Session中或较长期存放在Cookie中），而实际上在JS跨域请求时，浏览器既不会带跨域网站的cookie，也不会带上恶意网站的cookie。
另外，浏览器为什么仅仅限制读（即浏览器拦截请求结果）呢？一方面如果访问的是黑网站，那么网站无法跟据请求结果继续下一步的操作，如不断地猜测密码；另一方面如果访问的是白网站，block掉请求结果，应该是考虑到了请求结果可能会使得页面重定向，或者是给网页添加一个恶意的iframe之类的。

3.基于jsonp实现的跨域请求

JSONP 的缺点则是：它只支持 GET 请求而不支持 POST 等其它类型的 HTTP 请求；它只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面之间如何进行 JavaScript 调用的问题。

4.基于Cors实现的跨域请求

查看：Cors解决跨域请求

5.nginx反向代理解决跨域问题

6、Cors与JSONP的比较

JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。