设置跨域资源共享

一、总结

一句话总结：

服务器带Access-Control-Allow-Origin 这个 Header，浏览器根据服务器的header里面有没有Access-Control-Allow-Origin进行拦截

1、CORS 通过 HTTP 请求中附带 Origin 的 Header 来表明自己来源域。例如上面的例子，Origin 的 Header 就是 www.a.com。

2、服务器端接收到这个请求之后，会根据一定的规则判断是否允许该来源域的请求。如果允许，服务器在返回的响应中会附带上 Access-Control-Allow-Origin 这个 Header，内容为 www.a.com 来表示允许该次跨域访问。如果服务器允许所有的跨域请求，将 Access-Control-Allow-Origin 的 Header 设置为星号（*）即可。

3、浏览器根据是否返回了对应的 Header 来决定该跨域请求是否成功，如果没有附加对应的 Header，浏览器将会拦截该请求。如果是非简单请求，浏览器会先发送一个 OPTIONS 请求来获取服务器的 CORS 配置，如果服务器不支持接下来的操作，浏览器也会拦截接下来的请求。

 

1、设置跨域资源共享 流程?

1、CORS 通过 HTTP 请求中附带 Origin 的 Header 来表明自己来源域。例如上面的例子，Origin 的 Header 就是 www.a.com。
2、服务器端接收到这个请求之后，会根据一定的规则判断是否允许该来源域的请求。如果允许，服务器在返回的响应中会附带上 Access-Control-Allow-Origin 这个 Header，内容为 www.a.com 来表示允许该次跨域访问。如果服务器允许所有的跨域请求，将 Access-Control-Allow-Origin 的 Header 设置为星号（*）即可。
3、浏览器根据是否返回了对应的 Header 来决定该跨域请求是否成功，如果没有附加对应的 Header，浏览器将会拦截该请求。如果是非简单请求，浏览器会先发送一个 OPTIONS 请求来获取服务器的 CORS 配置，如果服务器不支持接下来的操作，浏览器也会拦截接下来的请求。

 

 

 

二、设置跨域资源共享

转自或参考：​​https://help.aliyun.com/document_detail/31870.html?spm=a2c4g.11186623.6.600.76011537vHZ0OW​​

 

跨域资源共享（Cross-Origin Resource Sharing，CORS）是 HTML5 提供的标准跨域解决方案，OSS 支持 CORS 标准来实现跨域访问。

 

跨域访问，或者说 JavaScript 的跨域访问问题，是浏览器出于安全考虑而设置的一个限制，即同源策略。当 A、B 两个网站属于不同域的时候，来自于 A 网站页面中的 JavaScript 代码希望访问 B 网站时，浏览器会拒绝该访问。

 

使用场景

在实际应用中，经常会有跨域访问的需求。

例如用户的网站 www.a.com，后端使用了 OSS。在网页中提供了使用JavaScript实现的上传功能，但是在该页面中，只能向 www.a.com 发送请求，向其他网站发送的请求都会被浏览器拒绝。这样就导致用户上传的数据必须从 www.a.com 中转。如果设置了跨域访问的话，用户就可以直接上传到OSS而无需从 www.a.com 中转。

 

跨域资源共享的实现

实现如下：

  2. CORS 通过 HTTP 请求中附带 Origin 的 Header 来表明自己来源域。例如上面的例子，Origin 的 Header 就是 www.a.com。
  3. 服务器端接收到这个请求之后，会根据一定的规则判断是否允许该来源域的请求。如果允许，服务器在返回的响应中会附带上 Access-Control-Allow-Origin 这个 Header，内容为 www.a.com 来表示允许该次跨域访问。如果服务器允许所有的跨域请求，将 Access-Control-Allow-Origin 的 Header 设置为星号（*）即可。
  4. 浏览器根据是否返回了对应的 Header 来决定该跨域请求是否成功，如果没有附加对应的 Header，浏览器将会拦截该请求。如果是非简单请求，浏览器会先发送一个 OPTIONS 请求来获取服务器的 CORS 配置，如果服务器不支持接下来的操作，浏览器也会拦截接下来的请求。

OSS 提供了 CORS 规则的配置，从而根据需求允许或者拒绝相应的跨域请求。该规则是配置在 Bucket 级别的。详情请参见 ​​PutBucketCORS​​。

 

细节分析

  • CORS 相关的 Header 附加等都是浏览器自动完成的，不需要您有任何额外的操作。CORS 操作也只在浏览器环境下有意义。
  • CORS 请求的通过与否和 OSS 的身份验证是完全独立的，即 OSS 的 CORS 规则仅仅是用来决定是否附加 CORS 相关的 Header 的一个规则，是否拦截该请求完全由浏览器决定。
  • 如果实际应用中同时存在 CORS 和非 CORS 请求，或者 Origin 头有多种可能值时，建议配置Vary: Origin
    头以避免本地缓存错乱。

 

 


 


我的旨在学过的东西不再忘记（主要使用艾宾浩斯遗忘曲线算法及其它智能学习复习算法）的偏公益性质的完全免费的编程视频学习网站： ​​fanrenyi.com​​；有各种前端、后端、算法、大数据、人工智能等课程。

​​版权申明：欢迎转载，但请注明出处​​

一些博文中有一些参考内容因时间久远找不到来源了没有注明，如果侵权请联系我删除。

博主25岁，前端后端算法大数据人工智能都有兴趣。