白店小二的面试总结——解决浏览器跨域

因为浏览器的同源策略,所以不同网站间不能互相访问数据,这是浏览器对JS作出的安全限制。
同源:协议、域名、端口号都相同,只要有一个不相同,那么都是非同源。
如:https://localhost:8080 https是协议,localhost是域名,8080是端口号。
由于同源策略的限制:
1、Cookie、LocalStorage 和 IndexDB 无法读取
2、DOM 和 Js对象无法获得
3、AJAX 请求不能发送
注意:对于像 img、iframe、script 等标签的 src 属性是特例,它们是可以访问非同源网站的资源的。

## 跨域的解决办法
(1)response 添加 header

resp.setHeader("Access-Control-Allow-Origin", "*");

(2)JSONP
修改ajax请求里的datatype类型为jsonp,新增jsonp 属性值为 “backFunction”.

$.ajax({
     type:"get",
     async:false,
     url:"http://localhost:8080/JavaWeb01/getPassWordByUserNameServlet?userName=Tom",	      			    
     dataType:"jsonp",//数据类型为jsonp
     jsonp:"backFunction",//服务端用于接收callBack调用的function名的参数
     success:function (data) {
         alert(data["passWord"]);
     },
     error:function () {
         alert("error");
     }
 });

原理:
1、在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,即一般的ajax是不能进行跨域请求的。但 img、iframe 、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。利用 script标签的开放策略,我们可以实现跨域请求数据,当然这需要服务器端的配合。 Jquery中ajax 的核心是通过 XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加< script >
标签来调用服务器提供的 js脚本。

2、当我们正常地请求一个JSON数据的时候,服务端返回的是一串 JSON类型的数据,而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。因为jsonp 跨域的原理就是用的动态加载 script的src ,所以我们只能把参数通过 url的方式传递,所以jsonp的 type类型只能是get 。
该部分参考了如何解决跨域问题?这篇文章。
(3)跨域资源共享(CORS)
普通跨域请求:只服务端设置Access-Control-Allow-Origin即可,前端无须设置。
带cookie请求:前后端都需要设置字段,另外需注意:所带cookie为跨域请求接口所在域的cookie,而非当前页。
目前,所有浏览器都支持该功能(IE8+:IE8/9需要使用XDomainRequest对象来支持CORS)),CORS也已经成为主流的跨域解决方案。
前端设置:

xhr.withCredentials = true;

//Vue cors 跨域 
Vue.axios.defaults.withCredentials = true;

(4)nginx代理跨域
(5)Nodejs中间件代理跨域
node中间件实现跨域代理,原理大致与nginx相同,都是通过启一个代理服务器,实现数据的转发。
vue框架的跨域(1次跨域):
利用node + webpack + webpack-dev-server代理接口跨域。在开发环境下,由于vue渲染服务和接口代理服务都是webpack-dev-server同一个,所以页面与代理接口之间不再跨域,无须设置headers跨域信息了。
webpack.config.js部分配置:

module.exports = {
    entry: {},
    module: {},
    ...
    devServer: {
        historyApiFallback: true,
        proxy: [{
            context: '/login',
            target: 'http://www.domain2.com:8080',  // 代理跨域目标接口
            changeOrigin: true,
            cookieDomainRewrite: 'www.domain1.com'  // 可以为false,表示不修改
        }],
        noInfo: true
    }
}

(6)WebSocket协议跨域
WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是server push技术的一种很好的实现。原生WebSocket API使用起来不太方便,我们使用Socket.io,它很好地封装了webSocket接口,提供了更简单、灵活的接口,也对不支持webSocket的浏览器提供了向下兼容。
该部分参考了前端常见跨域解决方案(全)这篇文章。

©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页