在开发前端应用程序时，你可能会遇到一个错误消息，“Access to XMLHttpRequest at 'http://example.com' from origin 'http://localhost:3000' has been blocked by CORS policy”（XMLHttpRequest访问“http：//example.com”的来源“http：//localhost：3000”已被CORS策略阻止）。这是由于跨域资源共享（CORS）策略导致的。本文将深入探讨CORS的工作原理，并提供解决这个问题的指导意义。
什么是CORS？
CORS是一种安全机制，它向Web浏览器提供了一种浏览器和服务器之间进行跨域通信的方法。跨域请求指的是从一个源站点向另一个站点发起HTTP请求。CORS定义了在浏览器和服务器之间共享数据的规则。如果请求违反了这些规则，则浏览器将阻止该请求。
为什么需要CORS？
CORS是为了保护用户隐私和安全而设计的。如果没有CORS，攻击者可以轻松地通过构造特定的URL来获取用户敏感信息。例如，攻击者可以创建一个恶意网站，在该网站上包含一个向受害者银行发送请求的表单，然后将表单的操作转移到受害者的电脑上。
CORS如何工作？
CORS通过在HTTP请求和响应的头部添加特定的标记来实现。当浏览器发起跨域请求时，服务器会在响应头中添加“Access-Control-Allow-Origin”字段，该字段指定允许访问资源的源站点。如果浏览器检查到该标记，则允许响应被接收。
以下是一个简单的示例：
// 请求
fetch('http://example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
// 响应头
Access-Control-Allow-Origin: http://localhost:3000在这个示例中，我们使用fetch API向'http：//example.com/data'发起GET请求，并期望响应为JSON数据。如果服务器响应包含了“Access-Control-Allow-Origin”标记，浏览器就会允许请求成功并返回JSON数据。
如何解决CORS问题？
通常情况下，CORS错误是由于服务端未正确配置CORS策略导致的。下面是一些可能的解决方案：
- 在服务器端配置CORS策略。
- 将前端代码和后端服务部署在同一个域名或子域名下。
- 使用代理服务器将请求转发给目标地址。
示例代码
以下是使用Node.js和Express框架为API添加CORS支持的示例代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- -- -------- ------------- ---- ----- -- - ----------------------------------------- ----- ------------------------------------------ -------- ----------------- ------------- --------- ------- --- -- ----- ---------------- ----- ---- -- - ----- ---- - - -------- ------- ------ -- --------------- --- -- ----- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
在这个示例中，我们使用了Express框架创建一个API，并通过添加中间件将CORS支持添加到API中。中间件设置了“Access-Control-Allow-Origin”标记为通配符“*”，以允许从任意来源的请求。我们还指定了允许的HTTP头部。
结论
CORS是Web开发中一个重要的安全
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12472