江苏龙网

  1. 主页 > 生活百科 > >

使用cors完成跨域请求处理

跨域请求

跨域的含义同源策略以及其限制内容同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击 。所谓 同源是指"协议+域名+端口" 三者相同，即便两个不同的域名指向同一个ip地址，也非同源 。

使用cors完成跨域请求处理

文章插图
 
同源策略限制内容有：
  • Cookie、LocalStorage、IndexedDB 等存储性内容
  • DOM 节点
  • AJAX 请求不能发送
但是有三个标签允许跨域加载资源：
<img src=https://www.isolves.com/it/cxkf/bk/2020-08-10/"...">常见跨域场景当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域 。不同域之间相互请求资源，就算作“跨域” 。常见跨域场景如下图所示：
使用cors完成跨域请求处理

文章插图
 
特别说明两点：
第一：如果是协议和端口造成的跨域问题“前端”是处理不了的 。第二：在跨域问题上，仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断 。“URL的首部”可以理解为“协议, 域名和端口必须匹配” 。这里你或许有个疑问： 请求跨域了，那么请求到底发出去没有？
跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回响应，只是响应被浏览器拦截了 。你可能会疑问明明通过表单的方式可以发起跨域请求，为什么 Ajax 就不行？因为归根结底，跨域是为了阻止用户读取到另一个域名下的内容，Ajax 可以获取响应，浏览器认为这不安全，所以拦截了响应 。但是表单并不会获取新的内容，所以可以发起跨域请求 。同时也说明了 跨域并不能完全阻止 CSRF ，因为请求毕竟是发出去了 。
实现跨域的方式之一：CORS
  • CORS 全称是 跨域资源共享（Cross-Origin Resource Sharing） ，是一种 AJAX 跨域请求资源的方式，支持现代浏览器，IE支持10以上 。
  • CORS与JSONP的使用目的相同，但是比JSONP更强大 。 JSONP只支持GET请求，CORS支持所有类型的HTTP请求  。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据 。
  • 浏览器会自动进行 CORS 通信，实现 CORS 通信的关键是后端 。只要后端实现了 CORS，就实现了跨域 。
  • 服务端设置 Access-Control-Allow-Origin 就可以开启 CORS 。该属性表示 哪些域名可以访问资源，如果设置通配符(*)则表示所有网站都可以访问资源。response = HttpResponse('向非同源的网址返回其请求所对应的响应数据') response["Access-Control-Allow-origin"] = "*"
前端发送请求类型虽然设置 CORS 和前端没什么关系，但是通过这种方式解决跨域问题的话，会在发送请求时出现两种情况，分别为 简单请求 和 复杂请求  。
简单请求只要同时满足以下两大条件，就属于简单请求
条件1：使用下列方法之一：
  • GET
  • HEAD
  • POST
条件2：Content-Type 的值仅限于下列三者之一：
  • text/plain
  • multipart/form-data
  • Application/x-www-form-urlencoded
请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器； XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问 。
复杂请求不符合以上条件的请求就是复杂请求 。
复杂请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求,该请求是 option 方法的，通过该请求来知道服务端是否允许跨域请求 。
我们用 PUT 向后台请求时，属于复杂请求，后台需做如下配置：
// 允许哪个方法访问我res.setHeader('Access-Control-Allow-Methods', 'PUT')// 预检的存活时间res.setHeader('Access-Control-Max-Age', 6)// OPTIONS请求不做任何处理if (req.method === 'OPTIONS') {res.end() }// 定义后台返回的内容app.put('/getData', function(req, res) {console.log(req.headers)res.end('****')})接下来我们看下一个完整复杂请求的例子，并且介绍下CORS请求相关的字段
// index.htmllet xhr = new XMLHttpRequest()document.cookie = 'name=xiamen' // cookie不能跨域xhr.withCredentials = true // 前端设置是否带cookiexhr.open('PUT', 'http://localhost:4000/getData', true)xhr.setRequestHeader('name', 'xiamen')xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {console.log(xhr.response)//得到响应头，后台需设置Access-Control-Expose-Headersconsole.log(xhr.getResponseHeader('name'))}}}xhr.send()//server1.jslet express = require('express');let app = express();app.use(express.static(__dirname));app.listen(3000);//server2.jslet express = require('express')let app = express()let whitList = ['http://localhost:3000'] //设置白名单app.use(function(req, res, next) {let origin = req.headers.originif (whitList.includes(origin)) {// 设置哪个源可以访问我res.setHeader('Access-Control-Allow-Origin', origin)// 允许携带哪个头访问我res.setHeader('Access-Control-Allow-Headers', 'name')// 允许哪个方法访问我res.setHeader('Access-Control-Allow-Methods', 'PUT')// 允许携带cookieres.setHeader('Access-Control-Allow-Credentials', true)// 预检的存活时间res.setHeader('Access-Control-Max-Age', 6)// 允许返回的头res.setHeader('Access-Control-Expose-Headers', 'name')if (req.method === 'OPTIONS') {res.end() // OPTIONS请求不做任何处理}}next()})app.put('/getData', function(req, res) {console.log(req.headers)res.setHeader('name', 'jw') //返回一个响应头，后台需设置res.end('****')})app.get('/getData', function(req, res) {console.log(req.headers)res.end('****')})app.use(express.static(__dirname))app.listen(4000)


推荐阅读


上一篇：后SRE时代监控系统选型

下一篇：没有了