您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

前端如何解决跨域问题?

时间:2021-06-09 10:40:18  来源:Nodejs技术栈  作者:五月君

作者:五月君 来源:Nodejs技术栈

前端如何解决跨域问题?

 

“前端如何解决跨域问题?” 这个是前段在知乎看到的一个提问,这几乎是做前端都会遇到的一个问题,产生的情况可能会很多,解决一个问题还是要先了解下为什么会产生这样问题,学习最好的方法就是结合一些实际的案例来学习,理解和掌握也会更加的深刻,本文结合 Node.js 写一些 Demo 看一下跨域问题及解决办法,最好是自己看完也能够动手操作下~

Cross-origin Resource Sharing 中文名称 “跨域资源共享” 简称 “CORS”,它突破了一个请求在浏览器发出只能在同源的情况下向服务器获取数据的限制。

本文会先从一个示例开始,分析是浏览器还是服务器的限制,之后讲解什么时候会产生预检请求,在整个过程中,也会讲解一下解决该问题的实现方法,文末会再总结如何使用 Node.js 中的 cors 模块和 Nginx 反向代理来解决跨域问题。

文中使用 Node.js 做一些 Demo 的演示,每一小节之后也会给予代码的 Demo 地址。

浏览器还是服务器的限制

先思考下,CORS 是浏览器端还是服务器端的限制?为了更好地说明这个问题,从一段示例开始。

从一段示例开始

index.html

<body> 
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/fetch/3.0.0/fetch.min.js"></script> --> 
  <script> 
    fetch('http://127.0.0.1:3011/api/data'); 
  </script> 
</body> 

client.js

创建 client.js 用来加载上面 index.html。设置端口为 3010。

const http = require('http'); 
const fs = require('fs'); 
const PORT = 3010; 
http.createServer((req, res) => { 
  fs.createReadStream('index.html').pipe(res); 
}).listen(PORT); 

server.js

创建 server.js 开启一个服务,根据不同的请求返回不同的响应。设置端口为 3011。

const http = require('http'); 
const PORT = 3011; 
 
http.createServer((req, res) => { 
  const url = req.url; 
  console.log('request url: ', url); 
  if (url === '/api/data') { 
    return res.end('ok!'); 
  } 
  if (url === '/script') { 
    return res.end('console.log("hello world!");'); 
  } 
}).listen(PORT); 
 
console.log('Server listening on port ', PORT); 

测试分析原因

运行上面的 client.js、server.js 浏览器输入 http://127.0.0.1:3010 在 Chrome 浏览器中打开 Network 项查看请求信息,如下所示:

前端如何解决跨域问题?

 

左侧是使用 fetch 请求的 127.0.0.1:3011/api/data 接口,在请求头里可以看到有 Origin 字段,显示了我们当前的请求信息。另外还有三个 Sec-Fetch-* 开头的字段,这是一个新的草案 Fetch Metadata Request Headers[1]。

其中 Sec-Fetch-Mode 表示请求的模式,通过左右两侧结果对比也可以看出左侧是跨域的。Sec-Fetch-Site 表示的是这个请求是同源还是跨域,由于我们这两个请求都是由 3010 端口发出去请求 3011 端口,是不符合同源策略的。

看下浏览器 Console 下的日志信息,根据提示得知原因是从 “http://127.0.0.1:3010” 访问 “
http://127.0.0.1:3011/api/data” 被 CORS 策略阻止了,没有 “Access-Control-Allow-Origin” 标头。

前端如何解决跨域问题?

 

在看下服务端的日志,因为请求 3011 服务,所以就看下 3011 服务的日志信息:

Server listening on port  3011 
request url:  /script 
request url:  /api/data 

在服务端是有收到请求信息的,说明服务端是正常工作的。

我们也可以在终端通过 curl 命令测试下,在终端脱离浏览器环境也是可以正常请求的。

$ curl http://127.0.0.1:3011/api/data 
ok! 

本节代码示例:

github.com/qufei1993/http-protocol/tree/master/example/cors/01 

总结回答最开始提出的问题

浏览器限制了从脚本内发起的跨源 HTTP 请求,例如 XMLHttpRequest 和我们本示例中使用的 Fetch API 都是遵循的同源策略。

当一个请求在浏览器端发送出去后,服务端是会收到的并且也会处理和响应,只不过浏览器在解析这个请求的响应之后,发现不属于浏览器的同源策略(地址里面的协议、域名和端口号均相同)也没有包含正确的 CORS 响应头,返回结果被浏览器给拦截了。

预检请求

预检请求是在发送实际的请求之前,客户端会先发送一个 OPTIONS 方法的请求向服务器确认,如果通过之后,浏览器才会发起真正的请求,这样可以避免跨域请求对服务器的用户数据造成影响。

看到这里你可能有疑问为什么上面的示例没有预检请求?因为 CORS 将请求分为了两类:简单请求和非简单请求。我们上面的情况属于简单请求,所以也就没有了预检请求。

让我们继续在看下简单请求和非简单请求是如何定义的。

预检请求定义

根据 MDN 的文档定义,请求方法为:GET、POST、HEAD,请求头 Content-Type 为:text/plain、multipart/form-data、
Application/x-www-form-urlencoded 的就属于 “简单请求” 不会触发 CORS 预检请求。

例如,如果请求头的 Content-Type 为 application/json 就会触发 CORS 预检请求,这里也会称为 “非简单请求”。

“MDN 文档
developer.mozilla.org/en-US/docs/Web/HTTP/CORS 简单请求”[2] 有更多关于简单请求的字段定义。

预检请求示例

通过一个示例学习下预检请求。

设置客户端

为 index.html 里的 fetch 方法增加一些设置,设置请求的方法为 PUT,请求头增加一个自定义字段 Test-Cors。

<script> 
  fetch('http://127.0.0.1:3011/api/data', { 
    method: 'PUT', 
    headers: { 
      'Content-Type': 'text/plain', 
      'Test-Cors': 'abc' 
    } 
  }); 
</script> 

上述代码在浏览器执行时会发现是一个非简单请求,就会先执行一个预检请求,Request Headers 会有如下信息:

OPTIONS /api/data HTTP/1.1 
Host: 127.0.0.1:3011 
Access-Control-Request-Method: PUT 
Access-Control-Request-Headers: content-type,test-cors 
Origin: http://127.0.0.1:3010 
Sec-Fetch-Mode: cors 

可以看到有一个 OPTIONS 是预检请求使用的方法,该方法是在 HTTP/1.1 协议中所定义的,还有一个重要的字段 Origin 表示请求来自哪个源,服务端则可以根据这个字段判断是否是合法的请求源,例如 Websocket 中因为没有了同源策略限制,服务端可以根据这个字段来判断。


Access-Control-Request-Method 告诉服务器,实际请求将使用 PUT 方法。


Access-Control-Request-Headers 告诉服务器,实际请求将使用两个头部字段 content-type,test-cors。这里如果 content-type 指定的为简单请求中的几个值,Access-Control-Request-Headers 在告诉服务器时,实际请求将只有 test-cors 这一个头部字段。

设置服务端

上面讲解了客户端的设置,同样的要使请求能够正常响应,还需服务端的支持。

修改我们的 server.js 重点是设置 Response Headers 代码如下所示:

res.writeHead(200, { 
  'Access-Control-Allow-Origin': 'http://127.0.0.1:3010', 
  'Access-Control-Allow-Headers': 'Test-CORS, Content-Type', 
  'Access-Control-Allow-Methods': 'PUT,DELETE', 
  'Access-Control-Max-Age': 86400 
}); 

为什么是以上配置?首先预检请求时,浏览器给了服务器几个重要的信息 Origin、Method 为 PUT、Headers 为 content-type,test-cors 服务端在收到之后,也要做些设置,给予回应。


Access-Control-Allow-Origin 表示 “http://127.0.0.1:3010” 这个请求源是可以访问的,该字段也可以设置为 “*” 表示允许任意跨源请求。


Access-Control-Allow-Methods 表示服务器允许客户端使用 PUT、DELETE 方法发起请求,可以一次设置多个,表示服务器所支持的所有跨域方法,而不单是当前请求那个方法,这样好处是为了避免多次预检请求。


Access-Control-Allow-Headers 表示服务器允许请求中携带 Test-CORS、Content-Type 字段,也可以设置多个。

Access-Control-Max-Age 表示该响应的有效期,单位为秒。在有效时间内,浏览器无须为同一请求再次发起预检请求。还有一点需要注意,该值要小于浏览器自身维护的最大有效时间,否则是无效的。

看下增加了预检请求的效果,第一次先发出了 OPTIONS 请求,并且在请求头设置了本次请求的方法和 Headers 信息,服务端在 Response 也做了回应,在 OPTIONS 成功之后,浏览器紧跟着才发起了我们本次需要的真实请求,如图右侧所示 Resquest Method 为 PUT。

前端如何解决跨域问题?

 

本节代码示例:

github.com/qufei1993/http-protocol/tree/master/example/cors/02 

CORS 与认证

对于跨域的 XMLHttpRequest 或 Fetch 请求,浏览器是不会发送身份凭证信息的。例如我们要在跨域请求中发送 Cookie 信息,就要做些设置:

为了能看到效果,我先自定义了一个 cookie 信息 id=NodejsRoadmap。

重点是设置认证字段,本文中 fetch 示例设置 credentials: "include" 如果是 XMLHttpRequest 则设置 withCredentials:"include"

<body> 
  <script> 
    document.cookie = `id=NodejsRoadmap`; 
    fetch('http://127.0.0.1:3011/api/data', { 
      method: 'PUT', 
      headers: { 
        'Content-Type': 'application/json', 
        'Test-Cors': 'abc', 
      }, 
      credentials: "include" 
    }); 
  </script> 
</body> 

经过以上设置,浏览器发送实际请求时会向服务器发送 Cookies,同时服务器也需要在响应中设置
Access-Control-Allow-Credentials 响应头

res.writeHead(200, { 
  'Access-Control-Allow-Origin': 'http://127.0.0.1:3010', 
  'Access-Control-Allow-Credentials': true 
}); 

如果服务端不设置浏览器就不会正常响应,会报一个跨域错误,如下所示:

Access to fetch at 'http://127.0.0.1:3011/api/data' from origin 'http://127.0.0.1:3010' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.

还有一点需要注意,如果我们在请求中设置了 credentials: "include" 服务端就不能设置
Access-Control-Allow-Origin: "*" 只能设置为一个明确的地址。

本节代码示例:

github.com/qufei1993/http-protocol/tree/master/example/cors/03 

解决跨域问题的几种方法

通过上面的分析了解跨域产生的原因之后,解决其实并不难,上面的讲解中其实也提供了解决方案,例如在 Node.js 中我们可以设置响应头部字段
Access-Control-Allow-Origin、Access-Control-Expose-Headers、Access-Control-Allow-Methods 等,但是在实际开发中这样设置难免繁琐,下面介绍几种常用的解决方法。

使用 CORS 模块

在 Node.js 中推荐你使用 cors 模块 github.com/expressjs/cors[3]。

在我们本节的示例中,一直使用的 Node.js 原生模块来编写我们的示例,在引入 cors 模块后,可以按照如下方式改写:

const http = require('http'); 
const PORT = 3011; 
const corsMiddleware = require('cors')({ 
  origin: 'http://127.0.0.1:3010', 
  methods: 'PUT,DELETE', 
  allowedHeaders: 'Test-CORS, Content-Type', 
  maxAge: 1728000, 
  credentials: true, 
}); 
 
http.createServer((req, res) => { 
  const { url, method } = req; 
  console.log('request url:', url, ', request method:', method); 
  const nextFn = () => { 
    if (method === 'PUT' && url === '/api/data') { 
      return res.end('ok!'); 
    } 
    return res.end(); 
  } 
  corsMiddleware(req, res, nextFn); 
}).listen(PORT); 

cors 在预检请求之后或在预检请求里并选项中设置了 preflightContinue 属性之后才会执行 nextFn 这个函数,如果预检失败就不会执行 nextFn 函数。

如果你用的 Express.js 框架,使用起来也很简单,如下所示:

const express = require('express') 
const cors = require('cors') 
const app = express() 
 
app.use(cors()); 

JSONP

浏览器是允许像 link、img、script 标签在路径上加载一些内容进行请求,是允许跨域的,那么 jsonp 的实现原理就是在 script 标签里面加载了一个链接,去访问服务器的某个请求,返回内容。

<body> 
  <script> 
    // fetch('http://127.0.0.1:3011/api/data', { 
    //   method: 'PUT', 
    //   headers: { 
    //     'Content-Type': 'application/json', 
    //     'Test-Cors': 'abc', 
    //   }, 
    //   credentials: "include" 
    // }); 
    <srcipt src="http://127.0.0.1:3011/api/data"></srcipt> 
  </script> 
</body> 

相比上面 CORS 模块,JSONP 只支持 GET 请求,显然是没有 CORS 模块强大的。

Nginx 代理服务器配置跨域

使用 Nginx 代理服务器之后,请求不会直接到达我们的 Node.js 服务器端,请求会先经过 Nginx 在设置一些跨域等信息之后再由 Nginx 转发到我们的 Node.js 服务端,所以这个时候我们的 Nginx 服务器去监听的 3011 端口,我们把 Node.js 服务的端口修改为 30011,简单配置如下所示:

server { 
  listen          3011; 
  server_name     localhost; 
 
  location / { 
    if ($request_method = 'OPTIONS') { 
      add_header 'Access-Control-Allow-Origin' 'http://127.0.0.1:3010'; 
      add_header 'Access-Control-Allow-Methods' 'PUT,DELETE'; 
      add_header 'Access-Control-Allow-Headers' 'Test-CORS, Content-Type'; 
      add_header 'Access-Control-Max-Age' 1728000; 
      add_header 'Access-Control-Allow-Credentials' 'true'; 
      add_header 'Content-Length' 0; 
      return 204; 
    } 
 
    add_header 'Access-Control-Allow-Origin' 'http://127.0.0.1:3010'; 
    add_header 'Access-Control-Allow-Credentials' 'true'; 
 
    proxy_pass http://127.0.0.1:30011; 
    proxy_set_header Host $host; 
  } 
} 

本节代码示例:

github.com/qufei1993/http-protocol/tree/master/example/cors/04 

总结

如果你是一个前端开发者,在工作难免会遇到跨域问题,虽然它属于浏览器的同源策略限制,但是要想解决这问题还需浏览器端与服务端的共同支持,希望读到这篇文章的读者能够理解跨域产生的原因,最后给予的几个解决方案,也希望能解决你对于跨域这个问题的困惑。

作者简介:五月君,软件设计师,公众号「Nodejs技术栈」作者。

参考资料

[1]Fetch Metadata Request Headers: https://w3c.github.io/webappsec-fetch-metadata/

[2]“MDN 文档
developer.mozilla.org/en-US/docs/Web/HTTP/CORS 简单请求”: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

[3]github.com/expressjs/cors: https://github.com/expressjs/cors



Tags:跨域   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
问题后端已经配置好了跨域,前端本地搭建vue-cli测试环境的时候如何解决跨域?(前提进行了基本的axios封装)分析这个时候后端API是一个明确的外网环境(使用外网IP或固定域名访问),...【详细内容】
2021-11-03  Tags: 跨域  点击:(55)  评论:(0)  加入收藏
浏览器的同源策略跨域的根本原因就是因为浏览器的同源策略,这是浏览器出于安全性考虑做出的限制,所谓同源是指:域名、协议、端口相同。比如在互联网上有两个资源(网页或者请求等...【详细内容】
2021-09-17  Tags: 跨域  点击:(101)  评论:(0)  加入收藏
前言难以置信,我居然被跨域问题折磨了一上午。相信很多程序员都遇到过跨域问题,当然,解决方案也有很多种。但我今天尝试了无数种办法,依旧没有解决。直到最后我媳妇儿给了我个提...【详细内容】
2021-09-16  Tags: 跨域  点击:(106)  评论:(0)  加入收藏
“前端如何解决跨域问题?” 这个是前段在知乎看到的一个提问,这几乎是做前端都会遇到的一个问题,产生的情况可能会很多,解决一个问题还是要先了解下为什么会产生这样问题,学习最好的方法就是结合一些实际的案例来学习,理解...【详细内容】
2021-06-09  Tags: 跨域  点击:(171)  评论:(0)  加入收藏
首先说一下,跨域它不是一个问题,它是浏览器的一种安全策略,叫同源策略。拿前后端分离项目来说,前端调试或者部署的地址,与api的地址,必须拥有相同的协议、域名、端口号。否则,前端...【详细内容】
2021-02-19  Tags: 跨域  点击:(263)  评论:(0)  加入收藏
什么是CSRF攻击?了解CSRF攻击的最佳方法是看一个具体示例。 例子假设您银行的网站提供了一种表格,该表格允许将资金从当前登录的用户转移到另一个银行帐户。例如,转账表单可能...【详细内容】
2021-01-15  Tags: 跨域  点击:(152)  评论:(0)  加入收藏
1、背景随着MPLS技术的成熟,其应用越来越广泛,尤其是在VPN方面。电信运营商提供给用户的MPLSVPN服务主要有MPLSLayer2 VPN和 MPLS Layer 3 VPN两类。MPLS Layer 2 VPN因标准化...【详细内容】
2021-01-04  Tags: 跨域  点击:(159)  评论:(0)  加入收藏
这篇文章我们聊一聊CORS跨域,它的全称是"跨域资源共享"(Cross-origin resource sharing)。在之前的文章中我们已经详细介绍了如何使用JSONP进行接口跨域请求,如果不了解的可以参...【详细内容】
2020-12-28  Tags: 跨域  点击:(165)  评论:(0)  加入收藏
内容简介MPLS VPN跨域互联有三种方式,分别是Option-A、Option-B、Option-C。这三种方式各自有各自的优缺点,你不能说某种跨域方式就能完全替代另外一种。但有时候,遇到两个ASBR...【详细内容】
2020-12-15  Tags: 跨域  点击:(305)  评论:(0)  加入收藏
前言:Axios是一个来自于vue官方推荐的一个用于与后端(Java、go、Python、PHP)进行数据交互的JavaScript库,你可以通过axios库快速高效的与后端进行数据交互,是现文件上传等复杂功...【详细内容】
2020-10-09  Tags: 跨域  点击:(163)  评论:(0)  加入收藏
▌简易百科推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(1)  评论:(0)  加入收藏
程序是如何被执行的&emsp;&emsp;程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(9)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(19)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(23)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(24)  评论:(0)  加入收藏
一个项目的大部分API,测试用例在参数和参数值等信息会有很多相似的地方。我们可以复制API,复制用例来快速生成,然后做细微调整既可以满足我们的测试需求1.复制API:在菜单发布单...【详细内容】
2021-12-14  AutoMeter    Tags:AutoMeter   点击:(20)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条