浏览器同源策略、跨域解决方案JSONP、CORS

最新推荐文章于 2025-04-23 12:26:59 发布

yinqian_Golang

最新推荐文章于 2025-04-23 12:26:59 发布

阅读量346

点赞数 1

分类专栏：前端文章标签：同源策略跨域 JSONP CORS

文章仅作个人记录学习，部分内容来自网络著作权归作者所有，如有侵权请联系删除。欢迎一起学习交流！

本文链接：https://blog.youkuaiyun.com/yinqian999/article/details/90232793

版权

前端专栏收录该内容

3 篇文章

订阅专栏

本文深入解析了同源策略，探讨了跨域资源共享（CORS）、JSONP及代理服务器三种跨域解决方案，详细介绍了它们的工作原理及优缺点。

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

HTTP访问控制（CORS） - HTTP | MDN

同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源的定义： 两个页面的协议，域名，端口相同。

如果两个脚本非同源，会有三个行为受到限制：

DOM 无法获得；
Cookie、LocalStorage 和 IndexDB 无法共享；
Ajax 请求限制；

跨域限制主要的目的就是为了用户的上网安全。

跨域的解决方法

对于 Ajax 跨域解决方案，通常来说有三种：JSONP、CORS、代理服务器

JSONP

由于 script 标签不受浏览器同源策略的影响，允许跨域引用资源。因此可以通过动态创建 script 标签，然后利用 src 属性进行跨域，这也就是 JSONP 跨域的基本原理。

通过 script 标签向服务器端发起请求不受浏览器同源策略的限制。而服务器端在接受到请求后，可以返回一个指定名字的函数，该函数的参数是需要返回的数据。
1.）原生实现：

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);

    // 回调执行函数
    function handleCallback(res) {
        alert(JSON.stringify(res));
    }
 </script>

服务端返回如下（返回时即执行全局函数）：

handleCallback({"status": true, "user": "admin"})

2.）jquery ajax：

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",    // 自定义回调函数名
    data: {}
});

3.）vue.js：

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

jsonp缺点：

只能实现get一种请求。

CORS（跨域资源共享）

跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

CORS 背后的基本思想，就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

代理服务器

代理服务器是指通过设置一个同源的代理服务器，然后将我们的 Ajax 请求发送到我们的代理服务器上，再通过代理服务器去向实际的服务器去请求数据，最后通过代理服务器返回给浏览器。
通过设置代理服务器来规避浏览器同源策略的限制，其原理是服务器之间的资源请求并没有同源策略的限制。但是由于操作起来并不方便，所以在实际开发中并不会经常用这种方法来解决问题。