跨域和常见的解决办法

forever_Mamba
167 阅读1分钟

这是我参与8月更文挑战的第15天，活动详情查看：8月更文挑战

前言

“八月的色彩是用金子铸就的，明亮而珍贵；八月的色彩是用阳光酿造的，芬芳而灿烂。”

未来的日子，愿你把自己调至最佳状态，缓缓努力，慢慢变好 Y(^o^)Y

跨域

指一个域下的文档或脚本试图去请求另一个域下的资源

常见跨域场景

URL                                      说明                    是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js         同一域名，不同文件或路径           允许
http://www.domain.com/lab/c.js

http://www.domain.com:8000/a.js
http://www.domain.com/b.js         同一域名，不同端口                不允许
 
http://www.domain.com/a.js
https://www.domain.com/b.js        同一域名，不同协议                不允许
 
http://www.domain.com/a.js
http://192.168.4.12/b.js           域名和域名对应相同ip              不允许
 
http://www.domain.com/a.js
http://x.domain.com/b.js           主域相同，子域不同                不允许
http://domain.com/c.js
 
http://www.domain1.com/a.js
http://www.domain2.com/b.js        不同域名                         不允许

跨域解决方案

就说说自己用到过的两个方案吧，其他的就不说了。简单的总结一下

  1. 通过jsonp跨域 jsonp跨域的原理 就是利用<script>标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的。 当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，形如： <script src="http://www.example.net/api?param1=1&param2=2"></script> 并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。

第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如： callback({"name":"hax","gender":"Male"})

这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。

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

    // 传参并指定回调执行函数为onBack
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
    document.head.appendChild(script);

    // 回调执行函数
    function onBack(res) {
        alert(JSON.stringify(res));
    }
 </script>
  1. 跨域资源共享（CORS）（Cross-origin resource sharing） 普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置

注：更多 跨域解决方案

结语

如果这篇文章帮到了你，欢迎点赞👍和关注⭐️

文章如有错误之处，希望在评论区指正🙏🙏。

avatar
文章
阅读
粉丝