跨域与解决跨域

跨域

由浏览器同源策略限制的一类请求场景

什么是同源策略？

同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也叫非同源。

跨域场景

URL                                      说明                    是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js         同一域名，不同文件或路径           允许
http://www.domain.com/lab/c.js

http://www.domain.com:8000/a.js
http://www.domain.com/b.js         同一域名，不同端口                不允许
 
http://www.domain.com/a.js
https://www.domain.com/b.js        同一域名，不同协议                不允许
 
http://www.domain.com/a.js
http://192.168.4.12/b.js           域名和域名对应相同ip              不允许
 
http://www.domain.com/a.js
http://x.domain.com/b.js           主域相同，子域不同                不允许
http://domain.com/c.js
 
http://www.domain1.com/a.js
http://www.domain2.com/b.js        不同域名                         不允许

还有一个就是 ajax 请求方法错误也会造成跨域
之前项目遇到一次
地址栏 输入接口有数据返回
而利用ajax请求数据报跨域问题 检查一番原来是请求方法是post， 这里改成get方法就好了

解决跨域

1. 测试阶段直接解决浏览器跨域 （推荐）

鼠标右键打开浏览器属性面板

更改目标位置

 --disable-web-security --user-data-dir=C:\MyChromeDevUserData

在后面加上 –disable-web-security --user-data-dir=C:\MyChromeDevUserData
注意 – 前面有个空格

c盘根目录下创建文件夹

然后打开浏览器

不过有时候不显示这个，实际以接口请求为准
请求接口若出现报跨域，则没处理成功

当是移动端网页真机测试时必须要后端处理接口跨域问题

2. 比较常用的是jsonp
   在框架流行的当下， 这种情况较少

   原生

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);

    // 回调执行函数
    function handleCallback(res) {
        alert(JSON.stringify(res));
    }
 </script>

jQuery

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",    // 自定义回调函数名
    data: {}
});