前端开发中的跨域小结

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

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

如何解决跨域

  • 粗暴的方式(仅建议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'
       }
     }
   },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容