S3 防盗链/跨域访问

最新推荐文章于 2025-04-16 17:21:00 发布

Lyon0x

最新推荐文章于 2025-04-16 17:21:00 发布

阅读量967

点赞数

分类专栏：存储

本文链接：https://blog.youkuaiyun.com/neo949332116/article/details/109825932

版权

存储专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了CORS（跨域资源共享）的工作原理，包括浏览器同源策略、简单请求与预检请求的区别，以及如何配置CORS以允许特定源的访问。同时，还探讨了CORS与身份凭证的交互，以及HTTP首部在跨域请求中的作用。通过示例和参考资源，帮助读者深入理解并应用CORS。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跨域资源共享 CORS 详解 http://www.ruanyifeng.com/blog/2016/04/cors.html

WEB跨域资源共享：Cross-origin Resource Sharing(CORS)

https://www.cnblogs.com/XiongMaoMengNan/p/7533203.html

跨域资源共享(CORS)：浏览器同源策略中的同源指协议+域名+端口三者完全一致，其中任何一个不同即为跨域

1. 浏览器同源策略是隔离潜在恶意文件的安全机制，限制信息传递和使用的边界，不是信息的保密机制。<img><script><link>以及表单提交都可实现跨域请求，但可能会不同程度受同源策略的限制，因浏览器不同而异；
2. 跨域资源共享(CORS)是一个W3C标准，是在客户端和服务端同时遵循的情况下执行的，整个CORS通信过程，都是浏览器自动完成，在编码上与同源资源共享并无不同(CORS交互中使用WithCredentials除外)；
3. 如果客户端不支持跨域资源共享(CORS)，则信息的传递和使用将可能受同源策略限制，但服务端返回的任然是正常的HTTP响应；
4. IE未将端口号加入到同源策略的组成部分之中，Chrome 和 Firefox不允许从 HTTPS 的域跨域访问 HTTP。

下表给出了相对http://store.company.com/dir/page.html同源检测的示例:

URL	结果	原因
`http://store.company.com/dir2/other.html`	成功
`http://store.company.com/dir/inner/another.html`	成功
`https://store.company.com/secure.html`	失败	不同协议 ( https和http )
`http://store.company.com:81/dir/etc.html`	失败	不同端口 ( 81和80)
`http://news.company.com/dir/other.html`	失败	不同域名 ( news和store )

规避浏览器同源策略：以下列举了一些常见的可用方法

复制代码

1. document.domain：不同子域下通过设置document.domain为相同的父级域来共享cookie 和 DOM (iframe)
   document.domain = "company.com:8080"；

2. 片段识别符(fragment identifier)：在使用iframe场景中，父子页通过URL #后的fragment来跨域传递数据
   window.onhashchange = function () {
      var message = window.location.hash;
      // ...
   }

3. window.name：无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它。window.name容量很大，可以放置非常长的字符串
   var data = document.getElementById('myIframe').contentWindow.name;

4. window.postMessage(跨文档通信Cross-document Messaging)：这是HTML5新增的API
   var popup = window.open('http://bbb.com', 'title');
   popup.postMessage('Hello World!', 'http://bbb.com');

5. jsonp：最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小；

6. WebSocket：它使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不支持同源政策，只要服务器支持，就可以通过它进行跨源通信；

7. Proxy Server：在本域之内增加Proxy Server节点负责域外数据的访问代理

8. CORS：此处不再赘述

复制代码

跨域资源共享(CORS)请求：通常CORS请求可分为两类，一类是简单请求，另一类则是预检请求。无论何种请求类型，只要服务端响应中未包含正确的首部如Access-Control-Allow-Origin: http://foo.example等，浏览器将报告错误。

简单请求：简单请求与普通请求相比，多了请求首部字段Origin，形如Origin: http://foo.example，服务端响应时则多了响应首部字段Access-Control-Allow-Origin，形如Access-Control-Allow-Origin: http://foo.example 或者 *。简单请求须满足所有下述条件：
- 使用下列方法之一：
  - GET
  - HEAD
  - POST
    - Content-Type ：仅POST方法的Content-Type值等于下列之一才算作简单请求：
      - text/plain
      - multipart/form-data
      - application/x-www-form-urlencoded
- Fetch 规范定义了对 CORS 安全的首部字段集合，不得人为设置该集合之外的其他首部字段。该集合为：
  - Accept
  - Accept-Language
  - Content-Language
  - Content-Type
  - DPR
  - Downlink
  - Save-Data
  - Viewport-Width
  - Width
预检请求：需预检的请求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求，如果服务端同意，再发送实际请求，这样可以避免跨域请求对服务器的用户数据产生未预期的影响。预检请求须满足所有下述条件：
- 使用了下面任一 HTTP 方法：
  - PUT
  - DELETE
  - CONNECT
  - OPTIONS
  - TRACE
  - PATCH
- 人为设置了对 CORS 安全的首部字段集合之外的其他首部字段。该集合为：
  - Accept
  - Accept-Language
  - Content-Language
  - Content-Type (but note the additional requirements below)
  - DPR
  - Downlink
  - Save-Data
  - Viewport-Width
  - Width
- Content-Type 的值不属于下列之一:
  - application/x-www-form-urlencoded
  - multipart/form-data
  - text/plain
跨域资源共享(CORS)附带身份凭证：默认情况下CORS不会在请求中附带 HTTP cookies 和 HTTP 认证信息，故需要将 withCredentials 标志设置为 true，如下
```
var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/credentialed-content/';
    
function callOtherDomain(){
  if(invocation) {
    invocation.open('GET', url, true);
    invocation.withCredentials = true;
    invocation.onreadystatechange = handler;
    invocation.send(); 
  }
}
```
但是，如果服务器端的响应中未携带 Access-Control-Allow-Credentials: true 或者 Access-Control-Allow-Origin: *，浏览器将不会把响应内容返回给请求的发送者。

跨域资源共享(CORS) HTTP首部：CORS所涉及的首部包括响应首部和请求首部，这些首部大多包含同一前缀 “Access-Control-”，Origin除外。更多解释可参考 HTTP访问控制（CORS）
参考：
1. 浏览器的同源策略

2. 浏览器同源政策及其规避方法

3. 跨域资源共享 CORS 详解

4. HTTP访问控制（CORS）

Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。

如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段（详见下文），就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。

如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。