浅谈跨域资源共享(CORS)

最新推荐文章于 2024-08-28 08:49:24 发布
最新推荐文章于 2024-08-28 08:49:24 发布
阅读量248 收藏 2
点赞数 2
分类专栏： 随手小记 文章标签： http cookie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46163658/article/details/111599212
版权

在这里插入图片描述

古之立大事者，不惟有超世之才，亦必有坚忍不拔之志——苏轼

CORS 是什么

CORS 是一个 W3C 标准，全称是 Cross-origin resource sharing 译为 跨域资源共享，新增了一组 HTTP 首部字段，允许服务器声明哪些源站有权限访问哪些资源。

跨域资源共享标准规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET 以外的 HTTP 请求，或者搭配某些 MIIME 类型的 POST 请求)，浏览器必须首先使用 OPTIONS 方法发起一个预检请求，从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证。

跨域资源共享机制的工作原理主要应用于三个场景:

  1. 简单请求
  2. 预检请求
  3. 认证请求

简单请求

简单请求是什么

请求同时满足所有下述条件,则该请求可视为 简单请求:

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

    • HEAD
    • GET
    • POST

  2. HTTP的头信息不超出以下几种字段：

    • Accept
    • Accept-Language
    • Content-Language
    • Last-Event-ID
    • Content-Type

  3. Content-Type 的值仅限于下列三者之一

    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain

值得注意的是，这些跨域请求与浏览器发出的其他跨域请求并无二致。如果服务器未返回正确的响应头部，则请求方不会收到任何数据。因此，那些不允许跨域请求的网站无需为这一新的 HTTP 访问控制特性担心。

基本步骤

对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段

下面是一个例子，浏览器发现这次跨源 AJAX 请求是简单请求，就自动在头信息之中，添加一个Origin字段。

GET /resources/access-control-with-get/ HTTP/1.1
Host: aruner.net
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://arunranga.com/examples/access-control/simpleXSInvocation.html
Origin: http://arunranga.com

上面的头信息中，Origin字段用来说明，本次请求来自哪个源。服务器根据这个值，决定是否同意这次请求。

下面是响应信息

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2.0.61 
Access-Control-Allow-Origin: http://arunranga.com
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

响应中携带了响应首部字段 Access-Control-Allow-Origin , 使用 Origin字段 和 Access-Control-Allow-Origin 字段就可以完成最简单的访问控制。

这个例子中 服务端返回的 Access-Control-Allow-Origin 为 http://arunranga.com，表示该域的资源可以被外域访问，也已使用 *，表示可以被任意外域访问。

预检请求

预检请求是什么

当浏览器发送一个非简单请求时，就会自动发送一个检测请求，所谓的检测请求就是在正式通信之前，增加一次 HTTP 查询请求，称为预检请求。

当请求满足下述任一条件时，即应首先发送预检请求:

  1. 请求方法是以下三种方法之一：
    • PUT
    • DEL
    • CONNECT
  • OPTIONS
    • TRACE
    • PATH
  1. HTTP的头信息不超出以下几种字段：
    • Accept
    • Accept-Language
    • Content-Language
    • Last-Event-ID
    • Content-Type
  2. Content-Type 的值仅限于下列三者之一
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain

预检请求要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。

预检请求可以避免跨域请求对服务器的用户数据产生未预期的影响。

请求消息

以下是 OPTIONS 预检请求消息示例：

OPTIONS /resources/access-control-with-post-preflight/ HTTP/1.1
Host: aruner.net
Connection: keep-alive
Accept: */*
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type,x-pingaruner
Origin: http://arunranga.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36 Edg/87.0.664.60
Sec-Fetch-Mode: cors
Referer: http://arunranga.com/
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
  • Access-Control-Request-Method：表示该请求使用的是 POST方法
  • Access-Control-Request-Headers：表示该请求携带 x-pingaruner 首部字段
  • Origin：请求来自哪个源

响应消息

以下是 OPTIONS 预检响应消息示例：

HTTP/1.1 200 OK
Date: Sat, 19 Dec 2020 15:20:30 GMT
Server: Apache
Access-Control-Allow-Origin: http://arunranga.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGARUNER, CONTENT-TYPE
Access-Control-Max-Age: 1728000
Upgrade: h2
Connection: Upgrade, Keep-Alive
Content-Length: 0
Cache-Control: max-age=172800
Expires: Mon, 21 Dec 2020 15:20:30 GMT
Vary: User-Agent
Keep-Alive: timeout=2, max=100
Content-Type: text/plain;charset=UTF-8
  • Access-Control-Allow-Methods: 表示允许使用 POST, GET, OPTIONS 请求方法
  • Access-Control-Allow-Headers: 表示允许请求携带首部字段 X-PINGARUNER
  • Access-Control-Max-Age: 表示设置响应有效时间为 1728000 秒

认证请求

CORS 的一个有趣的特性是，可以基于 HTTP cookies 和 HTTP 认证信息发送身份凭证。一般而言，对于跨源 XMLHttpRequest 请求，浏览器不会发送身份凭证信息。如果要发送凭证信息，需要设置 XMLHttpRequest 的某个特殊标志位。

如下代码所示

XMLHttpRequest.withCredentials = true;

将 XMLHttpRequest 的 withCredentials 标志设置为 true，使得向服务器发送 Cookies。如果是简单请求，所以浏览器不会对其发起 预检请求 。但是，如果服务器端的响应中未携带 Access-Control-Allow-Credentials: true ，浏览器将不会把响应内容返回给请求的发送者。

响应消息示例

HTTP/1.1 200 OK
Date: Sat, 19 Dec 2020 15:20:46 GMT
Server: Apache
Access-Control-Allow-Origin: http://arunranga.com
Cache-Control: no-cache
Pragma: no-cache
Access-Control-Allow-Credentials: true
Set-Cookie: pageAccess=1; expires=Mon, 18-Jan-2021 15:20:46 GMT; Max-Age=2592000
Upgrade: h2
Connection: Upgrade, Keep-Alive
Cache-Control: max-age=172800
Expires: Mon, 21 Dec 2020 15:20:46 GMT
Vary: Accept-Encoding,User-Agent
Content-Length: 80
Keep-Alive: timeout=2, max=100
Content-Type: text/plain;charset=UTF-8

只有当 Access-Control-Allow-Credentials 为 true 时才会将响应信息返回给开发者。

写在最后

通过 CORS 实现跨域访问是一个比较实用的一个方案，帮助我们解决了 Ajax 只能实用同源的限制。

一碗周.
关注
专栏目录
HTTP 头部字段 Access-Control-Allow-Origin
choubiao0107的博客
03-02 1816
前后端分离的协作开发方式，已经被很多公司采用。若前后端部署在不同的域名下，就会碰到跨域的问题。对于跨域的问题，W3C 有标准的解决方案，即跨域资源共享（Cross-origin resource sharing），缩写为 CORS。详细了解 CORS，可以参考阮一峰的博文：跨域资源共享 COR...
axios 基础
当历史只剩罪恶，唯有推倒重来，我们开创文明，我们传承文明，周而复始，生生不息。
09-08 877
axios 基础 特征： 从浏览器中创建XMLHttpRequest 从node.js发出http请求 支持Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止CSRF/XSRF 作用 ajax工具包 promise 支持请求和响应的拦截 nodejs和网页端都可以使用 使用 1，安装 npm install axios -S 2. 导入挂载 import axios from 'axios' vue.prototype.$http =
什么是 CORS ？一文搞懂 CORS 跨域原理！零基础入门到精通，收藏这一篇就够了
最新发布
leah126的博客
08-28 2501
CORS，全称为“跨域资源共享”（Cross-Origin Resource Sharing），是一种机制，它使用额外的 HTTP 头来告诉浏览器允许一个网页从另一个域（不同于该网页所在的域）请求资源。这样可以在服务器和客户端之间进行安全的跨域通信。
[Web] Access-Control-Allow-Origin 与 WithCredentials
buildcourage的博客
12-08 3458
Access-Control-Allow-Origin与WithCredentials 遇到的问题 在我们一个商城项目当中，前后端分离，前端使用Ajax(XMLHttpRequest)，后台是Spring项目，需要实现跨域访问。 Access-Control-Allow-Origin 我之前从网上找到实现跨域的方法，在后台添加了如下Filter： public class CrossDomainF...
利用Access-Control-Allow-Origin响应头解决跨域请求
weixin_30270561的博客
03-10 253
标签：cors 跨域请求 ACAO 2015-11-28 18:5312103人阅读评论(0)收藏举报 分类： web前端（5）J2EE服务器（2） 传统的跨域请求没有好的解决方案，无非就是jsonp和iframe，随着跨域请求的应用越来越多，W3C提供了跨域请求的标准方案（Cross-Origin Resource Sh...
跨域http请求 Access-Control-Allow-Origin
sinat_29326171的博客
01-10 1166
跨域http请求 Access-Control-Allow-Origin $cunzai_YZ = strstr($_SERVER['HTTP_REFERER'],'xxx.com'); if($cunzai_YZ){ header('Access-Control-Allow-Origin:*'); header('Access-Control-Allow-Credentials:true');...
浅谈spring-boot 允许接口跨域并实现拦截（CORS）
08-29
Spring Boot中实现CORS（Cross-Origin Resource Sharing，跨域资源共享）机制是为了解决不同域名、协议或端口下的资源请求问题。在Spring Boot项目中，我们可以使用CorsConfiguration和CorsFilter来实现CORS机制。 ...
浅谈Ajax跨域Session和跨域访问
12-02
JSONP（JSON with Padding）是一种常见的解决跨域问题的方法，尤其在不支持CORS（跨源资源共享）的旧版浏览器中。JSONP的工作原理是通过动态插入`<script>`标签来实现跨域请求，因为浏览器允许不同源的`<script>`...
浅谈angular.js跨域post解决方案
10-19
这种方式更符合CORS（Cross-Origin Resource Sharing，跨源资源共享）规范。CORS是一种更为现代和安全的跨域请求解决方案。服务器需要在响应中包含适当的CORS头部，比如"Access-Control-Allow-Origin"，指明哪些域名...
浅谈js中几种实用的跨域方法原理详解
10-20
2. CORS（跨源资源共享）： CORS是一种官方推荐的跨域解决方案，它比JSONP更强大，能够处理各种类型的HTTP请求。它通过在HTTP头中加入特定字段来实现。当浏览器检测到CORS策略被激活时，会自动在请求中加入一个...
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
10-19
值得注意的是，过滤掉OPTION请求只是解决Ajax跨域请求二次触发问题的一种方案，而且这只适用于CORS（跨源资源共享）策略允许的场景。在某些情况下，我们可能还需要在客户端和服务器端同时设置CORS相关的HTTP头部信息...
正确配置Access-Control-Allow-Origin，千万不要设置成*
热门推荐
baijiafan的博客
08-24 8万+
正确配置Access-Control-Allow-Origin，千万不要设置成*，这样的配置太不安全。
JAVA跨域请求Access-Control-Allow-Origin不能使用通配符问题
suohao701的博客
05-28 3173
The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’. 代码里面明明配置了跨域请求的配置，却还是报这个错 ```java @Configuration @Order(Ordered.HIGHEST_PRECEDENCE) public class CorsConfig
vue axios 跨域异常 Access-Control-Allow-Origin wildcard ‘*‘ mode is include withCredentials attribute
猿始森林
03-29 633
如果你需要在请求头传cookie，你可能要设置 withCredentials。当 withCredentials 为 true 时，Access-Control-Allow-Origin 的值必须是具体的源（即，不是 *）。
Access-Control-Allow-Origin通配符子域，端口和协议
CHCH998的博客
08-19 2801
I'm trying to enable CORS for all subdomains, ports and protocol. 我正在尝试为所有子域，端口和协议启用CORS。 For exa
Access-Control-Allow-Origin跨域解决及详细介绍
weixin_53841730的博客
01-31 3万+
我们能不能想办法，让我们的请求不通过ajax，而是通过给body中追加一个节点,这个节点的src值就是我们希望的要请求的目标接口，这样，服务器端返回的数据不就绕过这个跨域限制，将数据拿回来了。首先，跨域不是问题。跨域并不会阻止请求的发出，也不会阻止请求的接受，跨域是浏览器为了保护当前页面，你的请求得到了响应，浏览器不会把响应的数据交给页面上的回调，取而代之的是去提示你这是一个跨域数据。而当你上线项目时，如果你的代理配置得不够优雅，或者不够标准，你要小心了，非常有可能你的请求就都会失败。
android okhttp打印请求头_Retrofit2 + OkHttp3设置Http请求头(Headers)方法汇总
weixin_42515331的博客
12-23 1194
Requestrequest=newRequest.Builder().url(PATH).post(body)//取出本地保存的sessionId.addHeader("Cookie","sessionId").build();Callcall=mOkHttpClient.newCall(request);call.enqueue(newCallback(){@Overrid...
Http中Host，Referer，Origin和Access-Control-Allow-Origin
Mr_Li的博客
03-21 923
在HTTP协议中，Referer 是一个请求头（Request Header），它包含了当前请求页面的完整URL，即用户是从哪个页面链接到当前页面的。这个头部字段主要用于服务器端记录访问来源，分析用户行为，以及防止CSRF（跨站请求伪造）攻击。Referer 字段对于网站运营者来说是一个非常有用的工具，因为它可以帮助网站分析用户的行为模式，了解用户是如何找到并浏览网站的。例如，如果一家在线商店发现很多用户都是从特定博客文章链接过来的，那么他们可能会考虑与该博客作者建立合作关系，或者优化自己的营销策略。
VUE axios 跨域问题 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
王小二的博客
01-07 5万+
开发环境中，使用axios调用接口时，出现跨域的时候会被浏览器拦截，故而造成请求失败，并且在控制台中显示No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access....
跨域资源共享（CORS）实战
"CORS in Action 是一本由Monsur Hossain编著，Eric Bidelman作序的书籍，专注于探讨跨源资源共享（CORS）技术在创建和消费跨域API中的应用。这本书由Manning Publications出版，并在Shelter Island发行。" CORS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一碗周.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值