跨域的N种解决方案
跨域的N种解决方案
一、什么是跨域
跨域，是指浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。它是由浏览器的同源策略造成的，是浏览器对 JavaScript 施加的安全限制。
什么又是同源策略？
同源策略是由 Netscape 公司提出的一个著名的安全策略，所有支持 JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当页面在执行一个脚本时会检查访问的资源是否同源，如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。
二、 跨域问题常见报错形式
三、跨域的N种解决方案
1、vue项目node中间件（http-proxy-middlewar）
- 首先，下载node中间件 npm i http-proxy-middleware -S
- 其次，进行代理配置
- 使用
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跨域
- jsonp原理：script标签的src，img标签的src，link标签的href不受浏览器同源策略限制。利用同源策略的这一“漏洞”，就可以实现jsonp跨域。
- 简单例子
4、websocket
- WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯。
连接如图：
5.浏览器设置允许跨域（chrome）
chrome的版本升到49之后，跨域设置比以前严格了，在打开命令上加—disable-web-security之后还需要给出新的用户个人信息的目录。众所周知chrome是需要用gmail地址登录的浏览器，登录后就会生成一个存储个人信息的目录，保存用户的收藏、历史记录等个人信息。49版本之后，如果设置chrome浏览器为支持跨域模式，需要指定出一个个人信息目录，而不能使用默认的目录，估计是chrome浏览器怕用户勿使用跨域模式泄露自己的个人信息（主要是cookie，很多网站的登录token信息都是保存在cookie里）。
具体做法为：
- 在电脑上新建一个目录，例如：C:\MyChromeDevUserData
- 在属性页面中的目标输入框里加上 --disable-web-security --user-data-dir=C:\MyChromeDevUserData，–user-data-dir的值就是刚才新建的目录。
- 点击应用和确定后关闭属性页面，并打开chrome浏览器。
- 再次打开chrome，发现有“–disable-web-security”相关的提示，说明chrome又能正常跨域工作了。
6.其他一些方法
- document.domain + iframe跨域
- location.hash + iframe
- window.name + iframe跨域
- postMessage跨域
- nginx代理跨域