【CORS】跨域资源共享解决方案＜Access-Control-Allow-Origin＞

admin管理员组

文章数量:1580444

文章目录

• 前言
• 🍦 什么是跨域？
• 🍭 CORS--跨域
• • ✨CORS是什么？
  • ✨CORS怎么工作的？
  • ✨CORS如何使用？
• 🌟 扩展--响应头设置

前言

📔博主是一名大学在读本科生，主要学习方向是前端😊。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏🤩
🛠目前正在学习的是React框架，中间夹杂了一些基础知识的回顾⌨️
🌈博客主页👉codeMak1r.的博客
👉关注✨点赞👍收藏📂

🕹坚持创作✏️，一起学习📖，码出未来👨🏻‍💻！

---

🍦 什么是跨域？

要了解跨域，首先要知道一个东西：同源策略。

同源策略(Same-Origin Policy) 最早由 Netscape 公司提出，是浏览器的一种安全策略。
它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

同源策略中规定，访问服务必须在协议、域名、端口号 三个层面都相同，否则就是违背同源策略，也就是跨域。

比如，http://127.0.0.1:5500/index.html 访问 http://127.0.0.1:8000/server是跨域，违背了同源策略中的【端口号保持一致】。

http://www.a 访问 https://www.a 是跨域，违背了同源策略中的【协议保持一致】。

http://www.a 访问 http://www.b 是跨域，违背了同源策略中的【域名保持一致】。

下表列出了与 URL : http://storepany/dir/page.html的源进行对比的示例：

URL	结果
http://storepany/dir2/other.html	同源 只有路径不同
http://storepany/dir/inner/another.html	同源 只有路径不同
https://storepany/secure.html	失败 协议不同
http://storepany:81/dir/etc.html	失败 端口不同 ( http:// 默认端口是 80)
http://newspany/dir/other.html	失败 主机不同

而想要跨源访问资源（服务器），就需要进行跨域——CORS。

跨源资源共享 (CORS)（或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它 origin（域，协议和端口），使得浏览器允许这些 origin 访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。

跨源 HTTP 请求的一个例子：运行在 https://domain-a 的 JavaScript代码使用 XMLHttpRequest 来发起一个到 https://domain-b/data.json 的请求。

出于安全性，浏览器限制脚本内发起的跨源 HTTP 请求。 例如，XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一个域请求 HTTP 资源，除非响应报文包含了正确 CORS 响应头。

跨源域资源共享（CORS）机制允许 Web 应用服务器进行跨源访问控制，从而使跨源数据传输得以安全进行。现代浏览器支持在 API 容器中（例如 XMLHttpRequest 或 Fetch）使用 CORS，以降低跨源 HTTP 请求所带来的风险。

🍭 CORS–跨域

✨CORS是什么？

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，一种基于 HTTP 头的机制，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 等等请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

✨CORS怎么工作的？

CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应 以后就会对响应放行。

✨CORS如何使用？

以 node + express搭建的服务器为例：

// 引入express
const express = require('express')

// 创建应用对象
const app = express()
app.all('/cors-server', (request, response) => {
  // 设置响应头 允许本机5500端口跨域访问
  response.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')
  response.send('hello cors!')
})
// 监听端口，启动服务
app.listen(8000, () => {
  console.log('服务已经启动，端口8000监听中...')
})

设置允许任意外域访问：

response.setHeader('Access-Control-Allow-Origin','*');

一般地，我们还会设置如下响应头：

设置允许自定义的请求头字段

response.setHeader('Access-Control-Allow-Headers','*');

设置允许所有的请求方法访问(默认是GET和POST)

response.setHeader('Access-Control-Allow-Methods','*')

🌟 扩展–响应头设置

设置字段	作用
Access-Control-Allow-Origin	设置允许跨域
Access-Control-Expose-Headers	设置可以暴露的响应头
Access-Control-Max-Age	preflight 请求的结果能够被缓存多久
Access-Control-Allow-Credentials	是否允许浏览器读取 response 的内容。
Access-Control-Allow-Methods	被允许使用的 HTTP 请求方法
Access-Control-Allow-Headers	允许自定义的请求头字段

---

今天的文章就给诸佬们分享到这了😄，CORS跨域小知识你有没有get✅到呢？
创作不易，还烦请诸佬们能够三连支持✨
👉关注✨点赞👍收藏📂

本文标签： 资源共享解决方案CORSOrigincontrol