前端开发中的跨域小结

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

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

如何解决跨域

• 粗暴的方式（仅建议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 实现的请求不同源的跨域。其基本原理：网页通过添加一个 <script> 元素，向服务器请求 JSON 数据，这种做法（src）不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

缺点也很明显，只支持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'
       }
     }
   },