彻底搞定浏览器跨域问题

bestproxy • • 代理百科

彻底搞定浏览器跨域问题

本文主要讲解关于浏览器跨域请求现象原因并详细介绍一些目前的最佳解决方案

目录

认识跨域请求

CORS跨域解决方案

1.简单跨域请求

2.复杂跨域请求

3.跨域请求携带Cookie

反向代理服务器解决方案

总结

认识跨域请求

在提出解决方案之前我们先来认识一下跨域请求

浏览器发送一个HTTP请求有很多种方式，不同的方式发送的HTTP请求浏览器会将其分为不同的类型，比如请求一个html页面资源的类型为 document，使用 <script> 请求一个js脚本资源的类型是 script ，使用 XMLHttpRequest 请求一个接口的类型为 xhr，而我们今天的主角就是 xhr ，它是唯一能触发浏览器跨域策略的请求类型。

一个 xhr 请求包含请求行、消息报头(Header)、请求正文(Body)三个部分。其中请求行中包含了本次请求的URL，是否跨域主要是根据请求URL与当前发送请求的html页面地址是否是同源来决定。

当一个URL的协议、域名、端口号全部一致则为同源

例如

# 协议、域名、端口号全部一致:8080/:8080/api/user1

当一个URL的协议、域名、端口号有任何一处不一致则为跨域

例如

# 协议不一致:8080/:8080/api/user1# 域名不一致:8080/:8080/api/user1# 端口号不一致:8080/:3000/api/user1

所以当在页面 :8080 中使用 xhr 请求接口 :3000/api/user1 时，则浏览器抛出跨域错误

Index.html

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>  <script src=""></script>  <script>    const Axios = axios    ;(async () => {      const axios = Axios.create({ baseURL: :3000 })      const res = await axios.get(/api/user1)    })()  </script></body></html>

node-server.js

const http = require(http)const app = http.createServer((req, res) => {  const { method, url, headers: { cookie } } = req  console.log(method: , method, | url: , url, | cookie: , cookie)  if (method === GET && url === /api/user1) {    res.end(JSON.stringify([{ name: hagan, age: 22 }]))  }})app.listen(3000, () => {  console.log(listen 3000)})

CORS跨域解决方案

CORS英文全称Cross-origin resource sharing，中文翻译为跨域资源共享，是W3C标准，也是目前最推荐的跨域解决方案，该解决方案主要包含以下三种情况

1.简单跨域请求

在cors里，请求被分为两种类型，一种是简单跨域请求，另一种则是复杂跨域请求，当浏览器判断当前请求为简单跨域请求时，浏览器会启用较为宽松的安全策略，反之则会触发浏览器较高的安全防护策略

浏览器会通过以下标准来判断跨域请求是否为简单请求

为GET、POST、HEAD之一没有人为设置以下集合之外的其他请求头字段AcceptAccept-LanguageContent-LanguageContent-TypeContent-Type 的值是否为下列三者之一text/plainmultipart/form-dataapplication/x-www-form-urlencoded请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器。XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问请求中没有使用 ReadableStream 对象

以下为一个简单请求的示例

index.html

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>  <script src=""></script>  <script>    const Axios = axios    ;(async () => {      /**       * 简单跨域请求       * 请求流程：浏览器发送简单跨域请求，服务端正常响应请求，浏览器接受请求时发现响应头中没有Access-Control-Allow-Origin，浏览器拒绝接受请求       * 解决方法：服务端只需要加一个Access-Control-Allow-Origin就可以跨域访问       */      const axios = Axios.create({ baseURL: :3000 })      const res = await axios.get(/api/user1)      console.log(简单跨域请求: , res)    })()  </script></body></html>

这条请求能够正确被服务端接收处理和返回，但浏览器收到结果时会去响应头中判断 Access-Control-Allow-Origin 字段是否为 true，不符合则拒绝接收该请求并抛出跨域错误

解决这个错误只需要服务端在响应头中添加 Access-Control-Allow-Origin 为 true 便可解决。

node-server.js

const http = require(http)const app = http.createServer((req, res) => {  const { method, url, headers: { cookie } } = req  console.log(method: , method, | url: , url, | cookie: , cookie)  if (method === GET && url === /api/user1) { // 简单跨域请求    res.setHeader(Access-Control-Allow-Origin, :8080)    res.end(JSON.stringify([{ name: hagan, age: 22 }]))  }})app.listen(3000, () => {  console.log(listen 3000)})

2.复杂跨域请求

以下为复杂跨域请求示例

index.html

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>  <script src=""></script>  <script>    const Axios = axios    ;(async () => {      /**       * 复杂跨域请求       * 请求流程：浏览器发送复杂跨域请求时会提高安全等级，先发送一个OPTION类型的预检请求，请求没任何返回，预检请求失败，接口请求失败       * 解决方法：服务端处理OPTIONS请求并返回正确的响应头，浏览器校验响应头发现符合复杂跨域标准，预检请求成功，后续和简单跨域请求流程一致       */      const axios = Axios.create({ baseURL: :3000 })      const res = await axios.get(/api/user2, {        headers: { Hagan-Token: 123 }      })      console.log(复杂跨域请求: , res)    })()  </script></body></html>

当浏览器判断当前请求为复杂跨域请求时，浏览器会提高安全等级，先发送一个OPTION类型的预检请求，如果OPTION请求正确返回并且符合复杂跨域标准，才会发送真正的跨域请求去请求数据。如果OPTION请求没返回或不符合复杂跨域标准，则预检请求失败，接口请求失败

解决这个错误需要先在服务端处理 OPTION 类型的请求，然后返回符合复杂跨域标准的响应头，服务端代码如下

node-server.js

const http = require(http)const app = http.createServer((req, res) => {  const { method, url, headers: { cookie } } = req  console.log(method: , method, | url: , url, | cookie: , cookie)  if (method === OPTIONS && url === /api/user2) { // 复杂跨域请求    res.statusCode = 200    res.setHeader(Access-Control-Allow-Origin, :8080) // 可通过预检请求的域名    res.setHeader(Access-Control-Allow-Headers, Hagan-Token,Content-Type) // 可通过预检请求的Headers    res.setHeader(Access-Control-Allow-Methods, GET,POST) // 可通过预检请求的Method    res.end()  }  if (method === GET && url === /api/user2) { // 复杂跨域请求    res.setHeader(Content-Type, application/json)    res.setHeader(Access-Control-Allow-Origin, :8080)    res.setHeader(Set-Cookie, name=hagan)    res.end(JSON.stringify([{ name: hagan, age: 22 }]))  }})app.listen(3000, () => {  console.log(listen 3000)})

3.跨域请求携带Cookie

跨域请求默认不携带cookie，但有时在做业务开发时服务端还是需要根据cookie来做一些逻辑判断。

CORS也提供了携带Cookie的功能，主要有两步，1.客户端发送请求时指定 withCredentials 为 true，2.服务端在响应头设置 Access-Control-Allow-Credentials 为 true，代码如下

index.html

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>  <script src=""></script>  <script>    const Axios = axios    ;(async () => {      /**       * 跨域请求携带Cookie       * 请求流程：浏览器发送跨域请求时默认不会携带cookie，服务端无法接受到cookie导致服务端异常       * 解决方法：浏览器请求时添加withCredentials，此时服务端能接收到cookie，但返回响应时需要在响应头中添加Access-Control-Allow-Credentials，浏览器判断响应头中是否有Access-Control-Allow-Credentials，如果有则接受请求       */      const axios = Axios.create({ baseURL: :3000, withCredentials: true })      const res = await axios.get(/api/user3)      console.log(跨域请求携带Cookie: , res)    })()  </script></body></html>

node-server.js

const http = require(http)const app = http.createServer((req, res) => {  const { method, url, headers: { cookie } } = req  console.log(method: , method, | url: , url, | cookie: , cookie)  if (method === GET && url === /api/user3) { // 跨域请求携带Cookie    res.setHeader(Access-Control-Allow-Origin, :8080)    res.setHeader(Access-Control-Allow-Credentials, true)    res.end(JSON.stringify([{ name: hagan, age: 22 }]))  }})app.listen(3000, () => {  console.log(listen 3000)})

反向代理服务器解决方案

如果服务端资源可控，我们也可以通过服务端做反向代理的方式来解决跨域问题

:8080/:3000/api/user1

我们在页面 :8080/index.html 请求接口 :3000/api/user1 时跨域，如果我们通过反向代理把 :3000/api/user1 接口代理到 :8080/api/user1 下，那么在页面 :8080/index.html  请求接口 :8080/api/user1 就不会产生跨域问题了

实现反向代理有很多方式，比如nginx、webpack dev server等，这里提供一个node.js的示例

代码如下

node-server.js

const http = require(http)const app = http.createServer((req, res) => {  const { method, url } = req  if (method === GET && url === /api/user1) {    res.end(JSON.stringify([{ name: hagan, age: 22 }]))  }})app.listen(3000, () => {  console.log(listen 3000)})

proxy-server.js

const express = require(express)const { createProxyMiddleware } = require(http-proxy-middleware)const app = express()app.use(express.static(__dirname + /))app.use(/api, createProxyMiddleware({ target: :3000 }))app.listen(8080)

index.html

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>  <script src=""></script>  <script>    ;(async () => {      const res = await axios.get(/api/user1, {        headers: { Hagan-Token: 123 }      })      console.log(代理服务器解决方案: , res)    })()  </script></body></html>

总结

以上两种跨域解决方案已经能够覆盖大部分业务场景了，其他的一些跨域解决方案，比如 JSONP ，本文不太推荐使用，也不再展开介绍了，本文会在我的博客 www.hagan.zone 里持续更新，感兴趣的小伙伴可以通过查看原文关注我的博客。

关注我的，一起学习吧～

赞 (0)
« 上一篇 2022年3月6日 pm8:12
下一篇 » 2022年3月6日 pm8:14

相关文章

  • 英伟达CEO：“有可能”出售自己的ARM服务器CPU芯片

    鞭牛士 9月14日消息，美国芯片制造商英伟达此前宣布，将以400亿美元的估值从软银手中收购手机芯片设计商ARM。 该交易包含215亿美元英伟达股票和120亿美元现金，包括20亿美元签约时支付的定金。 对此消息，ARM CEO表示，ARM有办法解决中国合资企业的管理问题，情况“在控制之中”。 英伟达CEO称对于收购ARM得到中国监管机构批准有信心，并表示英伟达...

    代理百科 2022年4月3日

  • web服务器，应用服务器，web容器，反向代理服务器...

    展开全部 在这里先讲一下：Web 服务器与应用服务器的区别严格意义上Web服务器只负责处理HTTP协议，只能发送静态页面的内容。而JSP，ASP，PHP等动态内容需要通过CGI、FastCGI、ISAPI等接口交给其他程序去处理。这个其他程序就是应用服务器。比如Web服务器包括Nginx，Apache，IIS等。而应用服务器包括WebLogic，JBoss等...

    代理百科 2022年4月7日

  • 中超开局三连胜，为何没有这7支强队的份？

    　　记者陈永报道 2022赛季的中超联赛的开局阶段，冷门频出，赛季前并不被看好的武汉长江，成了3轮过后唯一保持全胜的球队，而实力得到普遍认可的几支强队——山东泰山、上海海港、长春亚泰、河南嵩山龙门、北京国安以及武汉三镇，加开赛前克服了自身困难的深足，三轮战罢竟然没有任何一支球队取得三连胜，各支球队或多或少地都出现了一些问题，那么，这些球队如何才能走出“困境”...

    代理百科 2022年6月17日

  • 在SynologyNAS上安装影梭客户端

    现在很多家庭都有NAS设备，存储家人照片、文件资料、影音资源等等，可是一台NAS也是一台独立的计算机，处理器、内存、硬盘资源强大且丰富，除了存储工作还可以做很多事情，比如我自己做个网站放上面，架设邮箱服务器，甚至可以在上面建立开发环境，编写应用程序。 今天呢，我给大家讲讲怎么安装Python开发环境，以及安装Python版本的影梭客户端，大家可能要问影梭是什...

    代理百科 2022年4月2日

  • Fiddler抓包工具总结

    序章Fiddler是一个蛮好用的抓包工具，可以将网络传输发送与接受的数据包进行截获、重发、编辑、转存等操作。也可以用来检测网络安全。反正好处多多，举之不尽呀！当年学习的时候也蛮费劲，一些蛮实用隐藏的小功能用了之后就忘记了，每次去网站上找也很麻烦，所以搜集各大网络的资料，总结了一些常用的功能。 Fiddler 下载地址 ：https://www.telerik...

    代理百科 2022年4月22日

  • minecraft怎么设置出生点

    展开全部 minecraft设置出生点的操作方法如下： 一、首先，进入我的世界游戏中。 二、点击游戏上方的语言栏标志。 三、就会出现对话框，我们点击那个斜杠。 四、第一个快捷指令，就是设置重生点。点击这个快捷指令。 五、输入指令/setworldspawn 。这个就是设置重生点的指令。 六、这样就可以快速设置重生点。 展开全部 如何设置出生点？ 最常用的方法...

    代理百科 2022年3月26日