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

本文链接：https://blog.youkuaiyun.com/liyangyang1998/article/details/107786207

本文深入解析浏览器同源策略，详述六种跨域处理方法，包括CORS、JSONP、WebSocket及代理服务器策略，适用于前后端开发人员。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为浏览器的同源策略，所以不同网站间不能互相访问数据，这是浏览器对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的浏览器提供了向下兼容。
该部分参考了前端常见跨域解决方案（全）这篇文章。