2017 September 10

跨域

自己在实际开发中用的跨域方法小结

为什么会跨域：浏览器的安全策略，对仅仅是浏览器自己本事的限制，后台不受影响。

如何解决跨域

粗暴的方式（仅建议debug阶段）

既然是浏览器的安全策略那就禁用浏览器的安全策略得了首先是先关闭浏览器然后打开终端运行下面的代码，然后你的浏览器就不受跨域限制了

 // 完全退出浏览器

// mac禁用跨域策略    chmod +x [chrome.sh](http://chrome.sh/)

open -a Google\ Chrome --args --disable-web-security --user-data-dir

// window禁用跨域策略

"windows下chrome安装路径" --disable-web-security --user-data-dir

"C:\Users\UserName\AppData\Local\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir

经典的jsonp JSONP, 全称 JSON with Padding，是使用 AJAX 实现的请求不同源的跨域。其基本原理：网页通过添加一个

缺点也很明显，只支持get

// 当前页面 a.com/a.html
<script type="text/javascript">
//回调函数
function callback(data) {
alert(data.message);
}
</script>
<script type="text/javascript" src="http://b.com/test.js"></script>

// test.js
// 调用callback函数，并以json数据形式作为阐述传递，完成回调
callback({message:"success"});

CORS

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

具体细节请参照阮一峰老师的博客： http://www.ruanyifeng.com/blog/2016/04/cors.html

既然后端不受跨域的影响那就写个同源的node服务器去代理请求就是了

这样诞生了 proxy等方法

 proxyTable: {
      '/api':{  // api省略host
        target: 'http://ap.staging.dns.somegongsi.com:5000', //真正需要请求的地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      },
      '/g3':{ //配置多个字段
        target: 'http://ap.staging.dns.somegongsi.com:5000',
        changeOrigin: true,
        pathRewrite: {
          '^/g3': '/g3'
        }
      }
    },