可能是最好的跨域解决方案了

最新推荐文章于 2024-03-07 17:02:51 发布
最新推荐文章于 2024-03-07 17:02:51 发布
阅读量544 收藏
点赞数
分类专栏： Web前端 文章标签： 经验分享 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70658665/article/details/124671600
版权

如果是非简单请求，会在正式通信之前，发送一个预检请求（preflight），目的在于询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些 HTTP 动词和头信息字段，只有得到肯定答复，浏览器才会发出正式的请求，否则就报错。你可能发现我们在日常的开发中，会看到很多使用 OPTION 方法发起的请求，它其实就是一个预检请求：

OPTIONS /cors HTTP/1.1

Origin: http://xxx.xx

Access-Control-Request-Method: PUT

Accept-Language: en-US

… …

那么到底哪些是简单请求，哪些是非简单请求 ？

请求类型

不会触发 CORS 预检的，就是简单请求。哪些请求不会触发预检 ？使用以下方法之一：GET, HEAD, POST,并且 Content-Type 的值仅限于下列三者之一：

  • text/plain

  • multipart/form-data

  • application/x-www-form-urlencoded

相反，不符合上述条件的就是非简单请求啦。所以，实现 CORS 的关键是服务器，只要服务器实现了 CORS 的相关接口，就可以实现跨域。CORS 与 JSONP相比，优势是支持所有的请求方法，缺点是兼容性上较 JSONP 差。除了 JSONP 和 CORS 外，还有一种常用的跨域解决方案：PostMessage，它更多地用于窗口间的消息传递。

PostMessage

PostMessage 是 Html5 XMLHttpRequest Level 2 中的 API，它可以实现跨文档通信（Cross-document messaging）。兼容性上，IE8+，Chrome，Firfox 等主流浏览器都支持，可以放心用😊，如何理解跨文档通信？你可以类比设计模式中的发布-订阅模式，在这里，一个窗口发送消息，另一个窗口接受消息，之所以说类似发布-订阅模式，而不是观察者模式，是因为这里两个窗口间没有直接通信，而是通过浏览器这个第三方平台。

window.postMessage(message, origin, [transfer])

postMessage 方法接收三个参数，要发送的消息，接收消息的源和一个可选的 Transferable 对象，如何接收消息 ？

window.addEventListener(“message”, function receiveMessage(event) {}, false); // 推荐，兼容性更好

window.onmessage = function receiveMessage(event) {} // 不推荐，这是一个实验性的功能，兼容性不如上面的方法

接收到消息后，消息对象 event 中包含了三个属性：source，origin，data，其中 data 就是我们发送的 message。此外，除了实现窗口通信，postMessage 还可以同 Web Worker 和 Service Work 进行通信，有兴趣的可以 戳这里[6]。

Websocket

Websocket 是 HTML5 的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。什么是全双工通信 ？简单来说，就是在建立连接之后，server 与 client 都能主动向对方发送或接收数据。原生的 WebSocket API 使用起来不太方便，我们一般会选择自己封装一个 Websocket（嗯，我们团队也自己封了一个 : ））或者使用已有的第三方库，我们这里以第三方库 ws[7] 为例：

const WebSocket = require(‘ws’);

const ws = new WebSocket(‘ws://www.host.com/path’);

ws.on(‘open’, function open() {

ws.send(‘something’);

});

ws.on(‘message’, function incoming(data) {

console.log(data);

});

… …

需要注意的是，Websocket 属于长连接，在一个页面建立多个 Websocket 连接可能会导致性能问题。

Nginx 反向代理

我们知道同源策略限制的是：浏览器向服务器发送跨域请求需要遵循的标准，那如果是服务器向服务器发送跨域请求呢？答案当然是，不受浏览器的同源策略限制。利用这个思路，我们就可以搭建一个代理服务器，接受客户端请求，然后将请求转发给服务器，拿到响应后，再将响应转发给客户端：1cfcf2b95d0aa8fce5db2a47bff364e5.png这就是 Nginx 反向代理的原理，只需要简单配置就可以实现跨域：

# nginx.config

# …

server {

listen       80;

server_name  www.domain1.com;

location / {

proxy_pass   http://www.domain2.com:8080;  #反向代理

proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名

index  index.html index.htm;

# 当用 webpack-dev-server 等中间件代理接口访问 nignx 时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用

add_header Access-Control-Allow-Origin *;

add_header Access-Control-Allow-Credentials true;

# …

}

}

Node 中间件代理

实现的原理和我们前文提到的代理服务器原理如出一辙，只不过这里使用了 Node 中间件做为代理。需要注意的是，浏览器向代理服务器请求时仍然遵循同源策略，别忘了在 Node 层通过 CORS 做跨域处理：

const https = require(‘https’)

// 接受客户端请求

const sever = https.createServer((req, res) => {

…

const { method, headers } = req

// 设置 CORS 允许跨域

res.writeHead(200, {

‘Access-Control-Allow-Origin’: ‘*’,

‘Access-Control-Allow-Methods’: ‘*’,

‘Access-Control-Allow-Headers’: ‘Content-Type’,

…

})

// 请求服务器

const pr 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 oxy = https.request({ host: ‘xxx’, method, headers, …}, response => {

let body = ‘’

response.on(‘data’, chunk => { body = body + chunk })

response.on(‘end’, () => {

// 响应结果转发给客户端

res.end(body)

})

})

// 结束请求

proxy.end()

})

document.domain

二级域名相同的情况下，设置 document.domain 就可以实现跨域。**什么是二级域名 ？**a.test.com 和 b.test.com 就属于二级域名，它们都是 test.com 的子域。如何实现跨域 ？

document.domain = ‘test.com’ // 设置 domain 相同

// 通过 iframe 嵌入跨域的页面

const iframe = document.createElement(‘iframe’)

iframe.setAttribute(‘src’, ‘b.test.com/xxx.html’)

iframe.onload = function() {

// 拿到 iframe 实例后就可以直接访问 iframe 中的数据

console.log(iframe.contentWindow.xxx)

}

document.appendChild(iframe)

总结

–

当然，除了上述的方案外，比较 Hack 的还有：window.name, location.hash，但是这些跨域的方式现在我们已经不推荐了，为什么 ？因为相比之下有更加安全和强大的 PostMessage 作为替代。跨域的方案其实有很多，总结下来：

  • CORS 支持所有的 HTTP 请求，是跨域最主流的方案

  • JSONP 只支持 GET 请求，但是可以兼容老式浏览器

  • Node 中间件和 Nginx 反向代理都是利用了服务器对服务器没有同源策略限制

  • Websocket 也是一种跨域的解决方案

  • PostMessage 可以实现跨文档通信，更多地用于窗口通信

  • document.domain, window.name, location.hash 逐渐淡出历史舞台，作为替代 PostMessage 是一种不错的方案

写在最后

本文首发于我的 博客[8]，才疏学浅，难免有错误，文章有误之处还望不吝指正！如果有疑问或者发现错误，可以在相应的 issues 进行提问或勘误如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励（完）

关于本文

作者：campcc

https://juejin.cn/post/6844903992057659400

参考资料

[1]

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

[2]

http://www.google.com**%EF%BC%8C%E7%AB%AF%E5%8F%A3%E6%98%AF

[3]

https://codepen.io/lycheelee/pen/MWWXKeN?editors=1000

[4]

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

[5]

https://caniuse.com/#search=CORS

[6]

https://juejin.cn/post/6844903665694687240#heading-9

m0_70658665
关注
专栏目录
jQuery跨域问题解决方案
12-10
下面把具体解决方案介绍如下。 后台处理路径“/test”的函数： 代码如下: //路径处理 app.get(“/test”,user.test); //处理函数 exports.test=function(req,res){  res.end(“alert(‘JS跨域访问’)”); ...
跨域之浏览器预检
lfl_5046的博客
09-25 302
跨域问题是一个老生常谈的问题了，怎么叫跨域，如何解决跨域，本篇不再赘言，因为本篇重点解决另一个问题：**已经解决了跨域，而且有些接口已经正常请求，但为什么还有一些请求就是报错?** 观察这些请求，会发现它们有一个共同点：它们首先自动发起一次options请求，当options请求成功返回后，真正的ajax请求才会再次发起。 **options请求发生的条件：** 1 接口请...
绝绝让你明白跨域cores
m0_60622481的博客
11-25 874
绝绝让你明白跨域cores
013-CORS跨域介绍
这个需求，做不了
11-11 881
CORS基本原理简单解释 CORS 是一个 W3C 标准，全称是“跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨域的服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。 CORS 请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。 简单请求 同时满足以下两大条件，才属于简单请求 请求方法是以下三种方法之一 HEAD、GET、 POST HTTP 的头信息不超出以下
跨域的几种办法原理详细
wuliyun88的博客
01-15 5036
1、什么是跨域 获取一个页面的域： document.domain;// qianduanblog.com 为了页面和服务器的安全（？），脚本是不能访问非本域的动态网络资源，但可以访问如脚本、样式、图片、视频、音频等这些静态资源。 那什么是跨域呢？存在以下情况中之一，即发生跨域： 网络协议不同，如http协议访问https协议。端口不同，如80端口访问8080端口。域名不同，如qia
解决跨域问题
笙箫的博客
08-19 700
*模拟跨域问题 ①后台代码 ②前台代码 ③修改hosts 编辑本地hosts文件，将http://test.mrbird.cc网址映射到127.0.0.1上 ④启动项目访问http://localhost:8080/，会发现页面并没有成功显示hello，并且F12观察浏览器控制台会发现其报错了： 因为我们在http://localhost:8080/域名下试图访问http:...
Python项目跨域问题解决方案
12-17
首先，我们来看第一个解决方案，通过`ALLOWED_HOSTS`配置。在Django项目的`settings/dev.py`文件中，你可以定义`ALLOWED_HOSTS`列表，列出允许访问后端服务的客户端域名。例如： ```python ALLOWED_HOSTS = ['api....
laravel开发中跨域的解决方案
12-20
laravel 进行开发的时候，特别是前后端完全分离的时候，由于前端项目运行在自己机器的指定端口(也可能是其他人的机器) ， 例如 localhost:8000 , 而 laravel 程序又运行在另一个端口，这样就跨域了，而由于浏览器的...
Vue项目中跨域问题解决方案
01-19
使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建） Jquery jsonp 后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET')...
spring cloud gateway请求跨域问题解决方案
08-25
Spring Cloud Gateway 请求跨域问题解决方案 Spring Cloud Gateway 作为一种基于微服务架构的API Gateway，提供了许多有用的特性，如路由、负载均衡、熔断器等。但是，在使用 Spring Cloud Gateway 时，经常会遇到...
前端使用axios发送Post请求,预检不通过(无法携带cookie),无法加载响应数据(跨域)
weixin_64309182的博客
05-29 3012
后端Spring boot 的controller层 就是标准的格式只是在controller类的上面加上了一个注解@CrossOrigin。(以及指定特定的参数)
非简单请求会发送预检请求
weixin_34348111的博客
01-22 737
问题描述 vue项目中, 发送请求, 会出现发送两次的假象: 如下图 而第一个请求无返回, header中信息如下: 在请求为非简单请求时, 会自动发送一个预检请求, 要求服务器可以确认这样请求. 预检请求方法为options, 用来询问的. 所以对于非简单请求来说, 是会先发送一次预检请求的. ...
跨域推荐： 迁移学习和推荐系统的火花碰撞
Kaiyuan_sjtu的博客
04-13 3529
作者|Chilia整理|NewBeeNLP什么是跨域推荐呢？一句话概括就是：跨域推荐（Cross-Domain Recommendation）是 迁移学习 在推荐系统中的一种应用。跨域推荐的目的一般是下面几个： 解决冷启动/数据稀疏问题 ：例如，一个公司的两个APP业务，用户群体(user)交叉很大，但是item不同，当A业务的用户首次来访B业务时（冷启...
浏览器中的preflight请求-预检请求
热门推荐
chen__cheng的博客
09-27 1万+
什么是preflight请求？ preflight，一个cors预检请求，属于options请求。该请求会在浏览器认为即将要执行的请求可能会对服务器造成不可预知的影响时，由浏览器自动发出。 利用预检请求，浏览器能够知道当前的服务器是否允许执行即将要进行的请求，只有获得了允许，浏览器才会真正执行接下来的请求。 所以，总结有几点： 浏览器自动发出该请求，不需要用户干预 该请求发生在用户发送的请求之前，只有预检请求通过，用户发送的请求才能发送到服务器，否则抛出CORS错误。 prefilght触发条件 pre
跨域推荐(Cross-Domain Recommendation)的最新综述
m0_57656758的博客
12-05 3919
论文解读系列第十六篇：IJCAI 2021--跨域推荐（Cross-Domain Recommendation）的最新综述 - 知乎目录1.背景介绍(1)内容层级相关性(content-level relevance)(2)用户层级相关性(user-level relevance)(3)产品层级相关性(item-level relevance)2.综述的动机3. 不同的跨域推荐场景以及挑战场景1. 单目标跨域推荐(single-target CDR)场景2. 多领域推荐(Multi-Domain Recom
到底什么是跨域，如何解决跨域（常见的几种跨域解决方案）？
u011047968的专栏
03-13 6944
协议：http://子域名：www子域名：a.com端口号：8080请求资源地址：scripts/jquery.js跨域根本原因是由同源策略引起的。所谓同源是指域名，协议，端口相同，当页面在执行一个脚本时会检查访问的资源是否同源，如果非同源，在请求数据的时候浏览器会在控制台报一个异常，提示拒绝访问。注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要！！！跨域访问的例子：请求跨域了，那么请求到底发出去没有？
9种常见的跨域解决方案（详解）
最新发布
qq_44741577的博客
03-07 1601
在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
关于浏览器的预检(OPTION)请求
Exclison的博客
01-26 4583
关于浏览器的预检(OPTION)请求 OPTION请求没有附带请求数据,响应体也为空 1. OPTION预检请求的作用 OPTION请求用于获取目的资源所支持的通信选项 检测服务器所支持的请求方法 CORS中的预检请求 CORS规范要求,对那些可能对服务器数据产生副作用的HTTP请求方法(特别是GET以外的HTTP请求,或者搭配某些MIME类型的POST请求),浏览器必须首先使用OPTIONS方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求.服务器确认允许
uni-app网络请求封装跨域_可能是最好的跨域解决方案了...
weixin_39805883的博客
11-22 1735
今天我们来聊一个老生常谈的话题，跨域！又是跨域，烦不烦 ？网上跨域的文章那么多，跨的我眼睛都疲劳了，不看了不看了 别走...我尽量用最简单的方式将常见的九种跨域解决方案给大家阐释清楚，相信认真看完本文，以后不管是作为受试者还是面试官，对于这块的知识都能够游刃有余。什么是“跨源”不是讲跨域吗 ？怎么又来个“跨源” ？字都能打错的 ？ ...稍安勿躁，其实我们平常说的跨域是一种狭义的请求场景，简单...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值