跨域的N种解决方案

一、什么是跨域

跨域，是指浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。它是由浏览器的同源策略造成的，是浏览器对 JavaScript 施加的安全限制。
什么又是同源策略？
同源策略是由 Netscape 公司提出的一个著名的安全策略，所有支持 JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当页面在执行一个脚本时会检查访问的资源是否同源，如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

二、 跨域问题常见报错形式

三、跨域的N种解决方案

1、vue项目node中间件（http-proxy-middlewar）

1. 首先，下载node中间件 npm i http-proxy-middleware -S
2. 其次，进行代理配置
   
3. 使用
   

2、CORS跨域资源共享

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
后台具体使用（通用）header配置如下：
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods:GET,POST,PUT
Access-Control-Allow-Credentials:true
注意：实际使用中可能还可能需要有一些其他的一些配置。除开直接配置header，后端还可以继承或引用有相似功能的类和组件。

3、jsonp跨域

1. jsonp原理：script标签的src，img标签的src，link标签的href不受浏览器同源策略限制。利用同源策略的这一“漏洞”，就可以实现jsonp跨域。
2. 简单例子
   

4、websocket

1. WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯。
   连接如图：
   

5.浏览器设置允许跨域（chrome）

chrome的版本升到49之后，跨域设置比以前严格了，在打开命令上加—disable-web-security之后还需要给出新的用户个人信息的目录。众所周知chrome是需要用gmail地址登录的浏览器，登录后就会生成一个存储个人信息的目录，保存用户的收藏、历史记录等个人信息。49版本之后，如果设置chrome浏览器为支持跨域模式，需要指定出一个个人信息目录，而不能使用默认的目录，估计是chrome浏览器怕用户勿使用跨域模式泄露自己的个人信息（主要是cookie，很多网站的登录token信息都是保存在cookie里）。

具体做法为：

1. 在电脑上新建一个目录，例如：C:\MyChromeDevUserData
2. 在属性页面中的目标输入框里加上 --disable-web-security --user-data-dir=C:\MyChromeDevUserData，–user-data-dir的值就是刚才新建的目录。
3. 点击应用和确定后关闭属性页面，并打开chrome浏览器。
4. 再次打开chrome，发现有“–disable-web-security”相关的提示，说明chrome又能正常跨域工作了。

6.其他一些方法

1. document.domain + iframe跨域
2. location.hash + iframe
3. window.name + iframe跨域
4. postMessage跨域
5. nginx代理跨域