前端常见跨域

最新推荐文章于 2024-04-05 17:55:41 发布
最新推荐文章于 2024-04-05 17:55:41 发布
阅读量438 收藏 6
点赞数 1
分类专栏： Javascript 浏览器/网络 文章标签： 前端 跨域 postMessage domain window.name
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014168594/article/details/88802693
版权

前端跨域

本文总结前端常用的跨域方案和例子，以及周边的应用知识

（1）跨域原理
（2）域名概念
（3）本地简单模拟跨域
（4）常见跨域方案

一、跨域原理

我们常说的跨域，是由浏览器同源政策的限制引起的。

同源政策：

同源策略/SOP（Same origin policy）是一种约定，是浏览器最核心也最基本的安全功能。它的核心就在于它认为自任何站点装载的信赖内容是不安全的。

所谓同源是指"协议+域名+端口"三者相同。

有三个方面限制：

1.DOM 同源策略：禁止对不同源页面 DOM 进行操作。主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的。

2.XMLHttpRequest 同源策略：禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。

3.cookie，localstorage和IndexDB无法读取

二、域名概念

顶级域名

互联网DNS等级之中的最高级的域，它保存于DNS根域的名字空间中。顶级域名是域名的最后一个部分，即是域名最后一点之后的字母。如 .cn、.com、.net

主、子域名

baidu.com是主域名，www.baidu.com和wap.baidu.com以及new.baidu.com都是他的子域名

父、子域名

一个相对概念。如 a.test.com是 test.com的子域名，q.a.test.com是 a.test.com的子域名

在这里插入图片描述

window.location 属性

例子：https://www.test.com:8080/first/second/index.html?user=123&name=panda#home

protocol（协议） => ‘https:’

hostname(主机名) => ‘www.test.com’

port(端口号) => ‘8080’

host(主机名) => ‘www.test.com:8080’

origin(来源) => ‘https://www.test.com:8080’

pathname（路径） => ‘/first/second/index.html’

search（url参数） => ‘?user=123&name=panda’

hash（hash值） => ‘#home’

href（地址） => ‘https://www.test.com:8080/first/second/index.html?user=123&name=panda#home’

三、简单模拟跨域

安装 node.js

在相应文件夹下打开cmd，输入: http-server 开启本地服务

在这里插入图片描述

在不同文件下开启本地服务，通过一样的 ip 地址但是不同的端口号，可用于简单本地模拟跨域

四、常见跨域方案

(1) jsonp 跨域

(2) location.hash

(3) window.name

(4) window.domain

(5) postMessage

(6) 跨域资源共享（CORS）

(7) 代理

(1) (6) (7) 可用于后台接口跨域

（1）jsonp 跨域

原理：在html页面中通过标签从不同域名下加载资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。（常用作跨域服务器的请求）

原生代码：

<script type="text/javascript">
	var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://www.test.com:8080/login?user=admin&callback=onBack';

    //document.head.appendChild(script);
    document.getElementsByTagName('head')[0].appendChild(script);

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

一般请求带到了服务器，解析参数然后拼成字符串或者 Json 当成返回数据

如返回： onBack({“status”: 200, “user”: “admin”})，就是执行上面的 onBack 函数

可以通过之前的模拟跨域，通过一样的 IP 地址但是请求不同端口的 js 文件在本地模拟服务器跨域的返回。（这里www.test.com就是我们的本地模拟的ip地址）

jQ 代码：

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

jsonp 跨域缺点：只能实现get一种请求

（2）location.hash

原理：

1、改变hash值不会刷新页面，因此可以利用 hash 值来传递数据。

2、无论跨域与否，iframe 内可以获取自己的 location.hash

3、只要域名相同就能通信，即使ABC三层嵌套

流程：

三个页面 A B C，A 通过第三方页面 C 达到与 B 的通讯

  1. A 页面设置 iframe 指向 B 页面地址，待 iframe 加载完后修改该 hash 值从而传参给 B，
    并监听本页面 hash 的变化

  2. B 页面在页面内监听 hash 变化从而获取参数，设置 iframe 指向 C 页面并传参给 C

  3. C 页面监听 hash 变化，只要 A C 页面域名相同，可根据 B 的 hash 参数，修改父父窗口（即 A页面）的 hash 从而触发 A 页面的监听，达到参数回传给 A 的效果

实例：

www.test.com:8080/A.html

var ifr = document.createElement('iframe');
createIfr('admin');

window.onhashchange = function(){	//监听hash变化
    if(location.hash == '#status')
        callBack();
}

function callBack(){
    alert('A: data from B.html ---> ' + location.hash);
}

function createIfr(hash){
    ifr.style.display = 'none';
    ifr.src = 'www.test.com:8081/B.html';
    document.body.appendChild(ifr);
    ifr.onload = function(){ ifr.src = 'www.test.com:8081/B.html#' + hash; }
}

www.test.com:8081/B.html

var ifr = document.createElement('iframe');

window.onhashchange = function(){
    if(location.hash == '#admin')
        callBack();
        createIfr('status');
}

function callBack(){
    alert('B: data from A.html ---> ' + location.hash);
}
function createIfr(hash){
    ifr.style.display = 'none';
    ifr.src = 'www.test.com:8080/C.html';
    document.body.appendChild(ifr);
    ifr.onload = function(){ ifr.src = 'www.test.com:8080/C.html#' + hash; }
}

www.test.com:8080/C.html

window.onhashchange = function(){
    parent.parent.location.hash = location.hash;
}

缺点：因为是修改 url 的 hash ，数据直接暴露在了url中，而且数据容量和类型都有限

（3）window.name

原理：在一个窗口（window）的生命周期内，窗口载入的所有的页面（不管是相同域的页面还是不同域的页面）都是共享一个 window.name 的（可存2M），每个页面对 window.name 都有读写的权限，window.name 是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。

流程：

  1. A 页面设置 iframe 指向 B 页面地址

  2. B 在当前页面设置 window.name 并传参

  3. C 页面不需处理

  4. 待 B 加载完成，A 页面 iframe 地址从 B 改成 C，从而可以访问在 B 页面时设置的 name

例子：

www.test.com:8080/A.html

var iframe = document.createElement('iframe');
var status = 0;
iframe.onload = function(){
    if(status == 1){
        onCallback(iframe.contentWindow.name);
    }else if(status == 0){
        status = 1;
        iframe.contentWindow.location = "www.test.com:8080/C.html";
    }
}
iframe.src = 'www.test.com:8080/B.html';
document.body.appendChild(iframe);

function onCallback(res) {
    alert('A： data from B.html ---> ' + res);
}

www.test.com:8081/B.html

window.name = 'name2.html设置的数据';

www.test.com:8080/C.html 不做操作

（4）window.domain

原理：当两个页面域名不同，但主域名相同时，可以把两个页面的 document.domain 都设成相同的域名,此时浏览器会认为他们在同一域名内，这样就可以通讯了。

www.test.com:8080/first/A.html

<iframe id="iframe" src="www.test.com:8080/test/B.html"></iframe>
<script type="text/javascript">
    document.domain = 'www.test.com';
    var user = 'admin';
</script>

www.test.com:8080/second/B.html

document.domain = 'www.test.com';
// 获取父窗口中变量
alert('data from parent ---> ' + window.parent.user);

缺点：只适用于主域名相同，而子域名不同的情况。

（5）postMessage

HTML5 中的 API，专门用来跨域操作的 Windows 属性。

window.postMessage(data,origin)

data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。

origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

www.test.com:8080/A.html

<iframe id="ifr" src="www.test.com:8081/B.html"></iframe>
<script type="text/javascript">
	var iframe = document.getElementById('ifr');
    iframe.onload = function() {
        var data = {
            name: 'panda'
        };
        iframe.contentWindow.postMessage(JSON.stringify(data), 'www.test.com:8081/B.html');
    };

    // 监听 B 返回数据
    window.addEventListener('message', function(e) {
        alert('A： data from B ---> ' + e.data);
    }, false);
</script>

www.test.com:8081/B.html

window.addEventListener('message', function(e) {
    alert('B： data from A ---> ' + e.data);
    var data = {
        pwd: '123'
    };
    window.parent.postMessage(JSON.stringify(data), 'www.test.com:8080/A.html');
}, false);

（6）跨域资源共享（CORS）

CORS需要浏览器和服务器同时支持。只要服务器实现了CORS接口，浏览器发现跨域就会自动添加一些附加的头信息，就可以跨源通信。

CORS分为简单请求和非简单请求。

1.简单请求
范围

（1）请求方法是以下三种方法之一

HEAD/GET/POST

（2）HTTP的头信息不超出以下几种字段

  • Accept

  • Accept-Language

  • Content-Language

  • Last-Event-ID

    Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

流程

对于简单请求，浏览器直接发出CORS请求。就是在头信息之中，增加一个Origin字段（浏览器会自动添加，标识请求来自哪个源）。

（1） 如果Origin指定的域名在许可范围外，服务器会返回一个正常的HTTP回应。但是会报一个onerror错误。

（2）如果Origin指定的域名在许可范围内，服务器返回的响应，响应报文会多出几个头信息字段。

Access-Control-Allow-Origin： 可跨域域名
Access-Control-Allow-Credentials： 是否允许发送Cookie（请求报文要设置withCredentials）
Access-Control-Expose-Headers： 头部字段能否暴露
2.非简单请求

不满足简单请求条件的就是非简单请求。

非简单请求在通信前，会发出一个预检请求判断能否跨域。

预检请求：

请求方法：Options
Origin： 请求来自哪个源
Access-Control-Request-Method： 非简单请求方法
Access-Control-Request-Headers:： 非简单请求头部

（1）预检请求失败，正常返回http，但是报错。

（2）预检请求成功，返回和简单请求一样的三个头部。

	Access-Control-Allow-Origin
	Access-Control-Allow-Credentials
	Access-Control-Expose-Headers

一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样

（6）node 中间件代理

原理：通过启一个代理服务器，实现数据的转发

薛定谔的panda
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端开发之跨域
weixin_43133668的博客
07-08 730
浏览器的同源策略是一种安全机制，用于限制一个网页中的脚本只能与来自同一源（域名、协议和端口号相同）的资源进行交互。通过配置代理可以实现跨域访问的原因是，代理服务器位于前端代码和后端服务器之间，它可以接收前端代码发送的请求，并将请求转发到目标后端服务器上。这样做的好处是可以绕过浏览器的同源策略限制，使得前端代码能够正常访问目标后端服务器上的接口。然而，由于浏览器的同源策略限制，前端代码只能直接访问与其所在域名相同的服务器上的接口。因此，在浏览器的同源策略限制下，前端代码可以成功访问其他域名下的接口。
前端常见跨域解决方案
m0_44973790的博客
04-22 288
一、什么是跨域？ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入： < link >、< script >、< img >、< frame>等dom标签，还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等 通常说的跨域是狭义的，是由浏览器同源策略限制
前端常见跨域解决方案（全）
weixin_34281537的博客
09-13 2235
什么是跨域？ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@f...
前端跨域
AiceIce的博客
08-04 412
今天被问懵逼了，好久没处理过跨域的问题了，写个文章总结下吧。
JSONP
weixin_41470109的博客
04-16 317
       JSONP是JSONwithpadding（填充式JSON或参数式JSON）的简写，是应用JSON的一种新方法，在后来的Web服务中非常流行。JSONP看起来与JSON差不多，只不过是被包含在函数中的JSON。collback({"name":"NINI"});      JSONP是由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面总调试的函数。回调函数的名字一般食杂请...
前端跨域（跨域、CROS、JSONP）
xiaobangsky的专栏
12-13 396
跨域 指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。 例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。 特别注意：不同源的页面之间，不准相互访问数据 同源策略 同源定义 源 window.origin或location.origin 可以得到当前源 源 = 协议 + 域名 +
前端网络——跨域
m0_51937621的博客
01-24 2063
前端网络——跨域 一、什么是跨域 1、跨域是指浏览器不能执行其他网站脚本，它是由浏览器同源策略造成的，是js的安全机制。 2、我们知道，页面本身由协议、域名、端口号等组成，例如：https://www.baidu.com:80。只要协议、域名和端口号三者中有任意一个不同，就算跨域。 跨域发生在哪里？ 跨域行为发生在浏览器。 =过程= 在一次请求数据的过程中： 即使发生了跨域，请求亦可以发出； 服务器端可以接收、正常处理并正常返回； 数据返回后，浏览器可以接受到数据； 接收数据后，浏览器发现当前页面的域同请求
前端常见跨域解决方案（全）.mht
03-05
分享转载：前端常见跨域解决方案 1、 通过jsonp跨域 2、 document.domain + iframe跨域 3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、 跨域资源共享（CORS） 7、 nginx...
前端常见跨域解决方案，web端开发
最新发布
2401_84091742的博客
04-05 744
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。
前端跨域知识
Rnger的博客
08-23 530
1、什么是跨域？ 跨域：只要协议、域名、端口有一个不相同就是属于跨域，为了浏览器安全考虑，浏览器有一个同源策略，但也为iframe引入和ajax请求带来不少的麻烦，所以需要通过一些方法是本地js能够操作其他域的页面对象或者其他域的js能够操作本域的页面对象（iframe之间）。下面是具体的跨域情况详解： URL 说明 是否允许通信 http://www.a.com/a....
前端跨域详解
liuyang1106的博客
10-21 348
跨域造成的原因 1.浏览器限制（同源策略） 同源策略的解释有很多，我这里贴上阮一峰老师的解释地址，有兴趣可以去看看阮一峰同源策略，用一句话解释就是，协议相同，端口相同，域名相同。比如下面这个url，https://www.baidu.com:443，使用的是https协议，域名是www.baidu.com，端口是443。当三者有一者不同，则会触发浏览器的同源策略，也就是通常所说的跨域。 2....
前端跨域解决方案
l17862868372的博客
06-24 186
前端跨域解决方案 什么是跨域 跨域是浏览器为了安全而做出的限制策略 浏览器请求必须遵循同源策略：同域名，同协议，同端口 跨域的解决方案 常用的三种方式 CORS跨域 CORS跨域：服务端设置，前端直接调用 说明:后端允许前端某个站点进行访问 JSONP跨域 *JSONP跨域：前端适配，后端配合 说明：前后台同时改造 前端需要安装JSONP插件：npm i jsonp --save-dev 调用：import jsonp from “jsonp” jsonp(url,option,(err,res)=
前端跨域简单理解
Junior2Ran的博客
04-12 589
满足跨域的条件1.域名不同，例如： a.com与b.com www.a.com与a.com（同一域名，不同二级域名） chs.a.com与en.a.com（主域名相同，子域名不同） a.com与70.32.92.74（对应ip地址） 2.协议不同，例如：http协议与https协议3.端口不同，例如：a.com:80与a.com:8080跨域的解决方法1.document.domain + ifra
前端跨域尝试
Joanne_join的博客
07-07 148
原生ajax：get function getTime(){ //1.创建ajax对象 var xhr= new XMLHttpRequest(); //2.准备请求（请求类型，后端地址）：此处请求并没有传数据出去，只是发送了一个请求 xhr.open("get","/gettime"); //3.监听ajax的状态变化 xhr.onreadystatechange= funtion(){
前端跨域总结
zhangqling的博客
03-26 261
跨域 （1）跨域存在的意义： 前后端分离 服务器分离，数据服务，图片服务，web服务。 云信息共享，第三方接口。 跨域是浏览器对ajax安全的限制。 （2）、解决跨域方法 修改本地host，本地默认是127.0.0.1：8080。如果，修改为和求情后端地址相同则，将会欺骗浏览器，越过拦截。dns预解析会先找本地，然后，才找线上dns服务器，因此，可以本地配置host，就是本地的dns。 http://www.baidu.com/api:8081 127.0.0.1:3000 随着项目越来越大，
前端单点登录（SSO）实现方法（二级域名与主域名）
weixin_34009794的博客
08-10 931
　　1.单点登录介绍 　　　　单点登录 SSO 全称 Singn Sign On 。SSO 是指在多个应用系统中，用户只需要登录一次用户系统，就可以访问其他互相信任的应用系统。例如：在网易官网登录账户，那么再进入网易邮箱等其他业务的时候会自动登录。另外还有一个好处就是在一定时间内可以不用重复登录账户。 　　2.域名与跨域 　　　　域名：网络中的一个门牌号。如：www.baidu.com 就是...
前端解决跨域问题（9个方法）
热门推荐
Crazykun的博客
06-30 2万+
什么是跨域？ 跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。 这里说明一下，无法跨域是浏览器对于用户安全的考虑，如果自己写个没有同源策略的浏览器，完全不用考虑跨域问题了。是浏览器的锅，对。 同源策略限制了一下行为： Cookie、LocalStorage 和 IndexDB 无法读取 DOM 和 JS 对象无法获取 Ajax请求发送不出去 说的更直白一点，就是我们在前端使用ajax发送异步请求，如果这个请求的URL地址与当前
h5ajax前端配置跨域
07-23
在前端中配置跨域请求，可以使用以下方法： 1. JSONP：JSONP 是一种跨域请求的解决方案，它通过动态创建 `<script>` 标签来发送 GET 请求。服务器返回的响应需要包裹在一个预定义的回调函数中，以便前端可以获取到数据。 ```javascript function handleResponse(data) { // 处理服务器返回的数据 } var script = document.createElement('script'); script.src = 'http://example.com/api?callback=handleResponse'; document.body.appendChild(script); ``` 需要注意的是，在使用 JSONP 时，服务端需要支持返回包裹在回调函数中的数据。 2. CORS（跨域资源共享）：CORS 是一种现代的跨域解决方案，通过在服务器端设置响应头来允许跨域请求。在前端中，可以通过设置 `XMLHttpRequest` 对象的 `withCredentials` 属性为 `true` 来发送跨域请求。 ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://example.com/api'); xhr.withCredentials = true; // 允许发送跨域请求 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 处理服务器返回的数据 var response = JSON.parse(xhr.responseText); } }; xhr.send(); ``` 需要注意的是，在使用 CORS 时，服务器端需要设置响应头 `Access-Control-Allow-Origin` 来指定允许访问的源。 以上是两种常见的前端跨域解决方案，根据实际情况选择适合的方法进行配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值