你可能不知道的CORS跨域资源共享

什么是CORS？

默认情况下，为了防止某些行为，浏览器的XHR对象只能访问来自同一域的资源。然而，在日常的实际开发中，我们经常会遇到跨域请求的需求，于是出现了一种跨域请求方案——CORS(Cross-origin Resource Sharing)。

CORS背后的原理是使用自定义的HTTP头与服务器通信，这样服务器就可以决定响应是否成功。

了解相应的策略

Origin)*:表示协议、域名、端口号；同源：来源相同，即协议、域名、端口完全相同；同源策略：同源策略是浏览器的一个安全功能。未经明确授权，不同来源的客户端脚本无法读写彼此的资源；同源策略分类：DOM同源策略：针对DOM，禁止操作不同来源页面的DOM；例如，不同域名的iframe限制了相互访问。XMLHttpRequest同源策略：禁止使用XHR对象向不同来源的服务器地址发送HTTP请求。不受同源策略限制：页面中的链接、重定向、表单提交(因为表单提交后，数据提交到动作字段，页面本身无关，请求结果不被照顾，后续操作交给动作中的字段)不受同源策略限制。对资源的引入没有限制，但是js不能读写加载的内容：比如script src=' http : '/script、img、link、iframe等。嵌入页面，为什么要跨域限制？

如果没有DOM同源策略：那么就没有xss研究，因为你的网站不会是你的，而是大家的。任何人都可以写代码来操作你的网站界面。如果没有XMLHttpRequest同源策略，那么CSRF(跨站点请求伪造)攻击就可以轻松进行：用户登录自己的网站页面A.com，并将用户标识添加到cookies中。用户浏览了恶意页面b.com，并在页面中执行了恶意的AJAX请求代码。B.com向a.com发送AJAX HTTP请求，请求默认会发送a.com对应的cookie。from从发送的cookie中提取用户ID，验证用户是否正确，并在响应中返回请求数据；数据被泄露了。而且由于Ajax是在后台执行的，这个过程用户是察觉不到的。(附)用XMLHttpRequest同源策略可以限制CSRF攻击吗？不要忘记，还有一些跨领域的解决方案不受相同的源策略的约束：表单提交和资源介绍(安全问题将在下一期中研究)

JSONP跨域：参照不受浏览器同源策略影响的脚本标签，可以跨域引用资源；因此，脚本标签可以动态创建，然后src属性可以用于跨域；缺点：所有网站都能获取数据，存在安全问题。两个网站都需要协商基本令牌的认证。只能是GET，不能是POST。可能会被注入恶意代码，篡改页面内容，可以使用字符串过滤来避免这个问题。服务器代理：浏览器有跨域限制，但服务器没有跨域问题，所以服务器可以请求所需域的资源并返回给客户端。Document.domain，window.name，location.hash:用iframe解析DOM同源策略postMessage:解析DOM同源策略，新方案CORS(跨域资源共享):这里提到的关键CORS(跨域资源共享)

HTML5提供的标准跨域解决方案是浏览器遵循的一套控制策略，通过HTTP Header进行交互；CORS配置项主要通过后端设置。CORS很容易使用

我之前说过，CORS跨域，嗯嗯，只是在后端设置访问控制-允许-原点：* |[或者特定域名]；

第一次尝试：

App。使用(异步(CTX，下一个)={CTX。set({ ' access-control-allow-origin ' : ' http://localhost 33608088 ' })发现有些请求可以成功，但有些仍然报告错误：

该请求被同源策略阻止，并且预请求的响应未通过检查：http未返回ok？

并发现OPTIONS请求：已发送。

发现CORS规范将请求分为两种类型，一种是简单请求，另一种是带有预览的非简单请求

简单请求和非简单请求

浏览器发送跨域请求的判断方式：

发送跨域请求时，浏览器首先会判断是简单请求还是非简单请求。如果是简单的请求，会先执行服务器程序，然后浏览器判断是否跨域；对于非简单请求，浏览器会在发送实际请求之前发送一个OPTIONS的HTTP请求，以判断服务器是否可以接受跨域请求；如果不可接受，浏览器将直接阻止实际请求的发生。什么是简单的请求

1.请求方法是以下方法之一：

GET HEAD POST2，所有标题仅包含在以下列表中(没有自定义标题):

除此之外，缓存控制内容语言内容类型过期最后修改的pragmas是非简单请求

CORS非简单请求配置指令

如上图错误报告所示，对于非简单请求，浏览器会先发送选项预览，预览通过后再发送真实请求；

发送选项预览请求，将下一个真实请求的信息发送到服务器：

来源：请求的源域信息访问-控制-请求-方法：下一个请求类型，如POST、GET等。访问控制请求标题：用户在下一个请求中明确设置的标题列表

服务器收到请求后，会根据附带的信息判断是否允许跨域请求，并通过Header返回信息：

访问-控制-允许-来源：允许跨域来源列表访问-控制-允许-方法：允许跨域方法列表访问-控制-允许-标题：允许跨域标题列表以防止丢失标题。所以建议设置为*访问控制-公开-头：允许公开给JavaScript代码的头列表；访问控制最长期限：浏览器预览请求缓存的最长时间，以秒为单位

完整的CORS配置

Koa配置CORS跨域资源共享中间件；

const CORS=(Origin)={ return async(CTX，next)={ CTX . set({ ' Access-Control-Allow-Origin ' : Origin，//允许的源})//预检请求if(CTX . request . method=' options '){ CTX . set({ ' Access-Control-Allow-methods ' : ' options，head，delete，get，put，post '，//支持跨域方法' Access-Control-Allow-heads ' : ' *，//允许头' Access-Control 如Cookie或HTTP认证信息)Ctx.send(null，‘预检请求’)} else {//real request await next()} }导出默认CORS可以跨域访问无论是简单请求还是非简单请求~

跨域时如何处理cookie

cookie:

我们知道http是无状态的，所以我们通常使用cookie维护用户状态时；Cookie将被每个相应的请求携带；但是跨域时不会携带和发送cookie问题：

因为cookie不能在不同的来源上操作；结果服务器无法设置cookie，浏览器也无法携带到服务器(场景：用户登录后发现响应中有set-cookie，但浏览器cookie没有对应的cookie)。

将浏览器请求的withCredentials设置为true可以使跨域请求携带Cookie；使用axios配置axios . defaults . with credentials=true服务器设置访问控制允许凭据=true允许跨域请求携带Cookie摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。