什么是跨域？如何解决？

1.什么是跨域？

跨域：指的是浏览器不能执行其他网站的脚本。是由浏览器的同源策略造成的，是浏览器对js施加的安全限制。

2.什么是同源策略？

同源是指协议，域名，端口相同。当页面在执行一个脚本时会检查访问的资源是否同源。非同源，请求数据时，浏览器会在控制台中报一个异常，拒绝访问。

当前页面的url	请求页面的url	是否跨域	原因
http://www.test.com/	http://www.test.com/index.html	否	同源（协议、域名、端口号相同）
http://www.test.com/	https://www.test.com/index.html	是	协议不同（http/https）
http://www.test.com/	http://www.baidu.com/	是	主域名不同（test/baidu）
http://www.test.com/	http://blog.test.com/	是	子域名不同（www/blog）
http://www.test.com:8080/	http://www.test.com:7001/	是	端口号不同（8080/7001）

3.非同源限制

【1】不能获取非同源网页的cookie，localStorage，indexedDB

【2】不能获取非同源网页的DOM

【3】不能向非同源之地发送ajax请求

4.解决办法

常用的3中方法：

【1】通过JSONP解决

JSONP是服务器宇客户端跨源通信的常用方法。

优点：简单适用，兼容性好

缺点：这种方式只支持get请求，不支持post请求

思路：网页通过添加一个<script>元素，向服务器请求JSON数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字
 
// 处理服务器返回回调函数的数据
<script type="text/javascript">
    function dosomething(res){
        // 处理获得的数据
        console.log(res.data)
    }
</script>

 

【2】通过nginx反向代理解决

思路：利用nginx反向代理把跨域变成不跨域，支持各种方式的请求

缺点：需要在nginx进行额外配置，麻烦

【3】通过CORS解决（最常用的方案，安全，可靠）

跨域资源共享CORS（Cross-Origin Resource Sharing）:属于跨源AJAX请求的根本解决方法

1.普通跨域请求：只需服务端设置Access-Control-Allow-Origin

2.带cookie跨域请求：前后端都需要进行设置

//java中的 hander() 设置，“*”号表示允许任何域向我们的服务端提交请求：
    header("Access-Control-Allow-Origin: *")