前端开发中的跨域小结

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

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

如何解决跨域

• 粗暴的方式（仅建议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 实现的请求不同源的跨域。其基本原理：网页通过添加一个 // 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'
         }
       }
     },