一、 什么是跨域？
跨域是浏览器的一种行为，当一个域名的网页去请求另一个域名的资源时，会受到浏览器同源策略的限制，也就是说当协议、域名、端口任意一个不一样时，操作就不会成功。
协议：http://www.jianshu.com -> https://www.jianshu.com // 失败
域名：主域名不同：http://www.jianshu.com -> http://www.google.com
子域名不同：http://v1.www.jianchu.com -> http://v2.www.jianchu.com
域名和域名IP：http://www.baidu.com -> http://180.149.132.47 // 失败
端口：http://www.jianshu.com:8080 -> http://www.jianshu.com:8081 // 失败
二、为什么要有同源策略呢
同源策略作用在浏览器上，网络是一个开放的环境，任何人都可以在上面操作，在这样一个环境下产生的同源策略中心目的自然是让大家能更安全的上网。
为什么没有同源策略的限制会不安全呢？假如我登入了一家网站进行了一笔资产交易，但是我又没有退出就立刻打开了其他网站，在我没有退出的情况下cookie等敏感信息还是保存在客户端的，而我打开的网站恰巧带有恶意代码读取了cookie还进行了一笔交易。过了一会手机就收到短信说您尾号为xxx的账号支出了xxx元，这不就两眼蒙逼了么。。。
同源策略限制的是js，css、图片等资源是不受限制的。但是有时候我们又不得不跨域，像是请求第三方接口啊啥的，接下来一起来看看都有哪些常用的解决跨域的方法吧
三、如何解决跨域问题
3.1 node做中间层 转发请求
原理：跨域是浏览器的同源策略导致的，服务器端的请求不涉及跨域
做法：主要使用 http-proxy-middleware 中间件，把请求代理转发到其他服务器
我们来看一下使用express服务器来如何配置。
首先要安装node环境和express以及http-proxy-middleware 中间件
proxy.png
优点：浏览器兼容性好，支持多种网络请求
缺点：中间加了一层转发，可能会使接口变慢
3.2 cors - cross origin resource sharing(跨域资源共享)
原理：通过http头部让浏览器和服务器进行沟通，决定请求是响应还是拒绝。当http发起请求时，请求头信息会有一个origin字段，响应头信息会带着 access-control-allow-origin, access-control-allow-credentials等头字段
cors.png
如果返回头中没有这个头信息，或者access-control-allow-origin 中不包含origin中的URL，浏览器就会驳回请求。
做法：既然知道了浏览器是怎么判断是否跨域的，我们就可以轻松解决它了，不过这需要后端童鞋的帮忙。设置代码如下：
header.png
浏览器又将cors请求分为简单请求和非简单请求，具体可以查看阮大神的文章：http://www.ruanyifeng.com/blog/2016/04/cors.html
优点：1. 支持所有类型的http请求，2.可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理
缺点：浏览器兼容性不好，不支持老式浏览器
3.3 jsonp
原理：script标签中的src属性可以可以访问跨域的js脚本，利用这个特性，后端不再返回json格式的数据，而是返回一段调用某个函数的js代码，在src中进行调用，实现跨域
做法：动态创建script标签，src中指向要调用的域名，并且加上一个callback参数，指明服务端要调用的函数
jsonp.png
服务端代码可能如下：
callback({ age: 18, name: 'zhangsan' });
优点：浏览器兼容性好
缺点：1. 只支持get请求 2. 请求代码中可能存在安全问题 3. 不好判断请求是否成功
网友评论