跨域的解决方法总结

首先谈一下跨域：

要了解跨域，必须要知道浏览器的同源策略，同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。同源策略是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

所以，我们跨域就是由于同源策略的限制，不同域名下的文件资源无法互相访问。

Access-Control-Allow-Origin:跨域报错

跨域的情况：域名不同、协议不同、端口不同、域名和域名对应ip、主域名和子域名。

 

解决方案：

1.后端代理：后端为服务器端，不存在跨域。

2.HTML5提供的XMLHttprequest Level2 （XHR2、xhr2）对象。 （IE8以下不支持）

   使用方式：在后端添加代码

header('Access-Control-Allow-Origin:*');//允许任何地址跨域访问
header('Access-Control-Allow-Method:POST,GET');//请求方式允许post和get

3.jsonp(json with padding):将数据用一种填充的方式获取。（jsonp只能使用get方式）

  它的使用场景是解决接口数据类型是jsonp格式的。

  原理：script标签不存在跨域,利用这个标签实现跨域的方式。

jsonp获取百度搜索接口数据实例：

<script type="text/javascript">
        var oT = document.querySelector('input');
        var oUl = document.querySelector('ul');

        function hehe(data) {
            //console.log(data.s);
            var html = '';
            for (var i = 0; i < data.s.length; i++) {
                html += '<li><a href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=' + data.s[i] + '&rsv_pq=98683b9900023a0f&rsv_t=9a0bRCIbt9exqbgjdxgEOOd9fu%2Bq6N%2BcsLpvvILjVSq4V3S1Ih5hxOoBt24&rqlang=cn&rsv_enter=1&inputT=960&rsv_sug3=21&rsv_sug1=39&rsv_sug7=100&rsv_sug2=1&prefixsug=a&rsp=0&rsv_sug4=960">' + data.s[i] + '</a></li>';
            }
            oUl.innerHTML = html;
        }
        oT.oninput = function() {
            var sc = document.createElement('script');
            sc.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + oT.value + '&cb=hehe';
            document.body.appendChild(sc);
        }
    </script>

4. nginx:配置服务器--最方便的方式

5.node解决跨域： 引用cors模块

在express项目下面
执行npm install cors
然后在app.js里面
var cors = require('cors');
app.use(cors());

出自guthub ： 传送门 https://github.com/TroyGoode/node-cors