CORS跨域资源共享解析

跨域处理中的 CORS(Cross-Origin Resource Sharing,跨域资源共享) 是浏览器强制执行的一种安全机制,用于控制网页中不同"源"(协议+域名+端口)之间的资源交互。以下是通俗解释和核心要点:


为什么需要 CORS?

  1. 浏览器的同源策略(Same-Origin Policy)

    默认情况下,浏览器禁止网页向"不同源"的服务器发送请求(例如:https://a.com 的页面不能直接请求 https://b.com 的数据)。这是为了防止恶意网站窃取用户数据。

  2. 合理跨域的需求

    实际开发中,前后端分离项目(前端 http://localhost:3000,后端 http://api.example.com)或调用第三方 API 时,必须合法地突破同源限制。


CORS 如何工作?

当浏览器检测到跨域请求 时,会自动添加 Origin 请求头(标明请求来源),并检查服务器的响应头是否包含允许该来源的声明。流程分两类:

1. 简单请求(Simple Request)
  • 条件 :请求方法为 GET/POST/HEAD,且请求头为简单字段(如 Content-Type: text/plain)。
  • 过程
    1. 浏览器直接发送跨域请求,并在 Origin 头中声明来源。

    2. 服务器响应需包含:

      http 复制代码
      Access-Control-Allow-Origin: https://your-frontend.com  // 或 *(允许任意源)
    3. 浏览器检查通过后,前端才能拿到响应。

2. 预检请求(Preflight Request)
  • 触发条件 :复杂操作(如 PUTDELETE,或自定义请求头如 Authorization)。
  • 过程
    1. 浏览器先发送 OPTIONS 请求(预检),询问服务器是否允许跨域。

    2. 服务器响应需包含:

      http 复制代码
      Access-Control-Allow-Origin: https://your-frontend.com
      Access-Control-Allow-Methods: GET, POST, PUT      // 允许的方法
      Access-Control-Allow-Headers: Content-Type, Token // 允许的请求头
    3. 预检通过后,浏览器才发送真实请求。


服务端如何配置 CORS?

以 Node.js(Express)为例:

javascript 复制代码
const express = require('express');
const app = express();

// 允许跨域中间件
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'https://your-frontend.com'); // 或谨慎使用 *
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.setHeader('Access-Control-Allow-Credentials', 'true'); // 允许携带Cookie
  next();
});

// 处理预检请求
app.options('*', (req, res) => res.sendStatus(200));

常见问题与解决

  1. 浏览器报错 CORS policy blocked

    • 检查服务端是否正确设置了 Access-Control-Allow-Origin 等响应头。
    • 确保 Origin 值在服务端白名单内(不能同时使用 *Credentials)。
  2. 携带凭证(Cookies)

    需同时满足:

    • 客户端设置:fetch(url, { credentials: 'include' })
    • 服务端设置:Access-Control-Allow-Credentials: true
    • Access-Control-Allow-Origin 必须是具体域名(不能用 *)。
  3. 预检请求失败(OPTIONS 405)

    确保服务器正确处理了 OPTIONS 方法(如示例中的 app.options())。


替代方案(不推荐)

  • JSONP(仅 GET 请求) :利用 <script> 标签跨域,但安全性低。
  • 代理服务器:前端请求同源代理,由代理转发请求(适用于无法修改服务端的情况)。

总结

概念 说明
CORS 本质 服务端通过响应头声明允许哪些外部源访问资源。
浏览器角色 拦截跨域响应,依据服务端响应头决定是否放行。
关键响应头 Access-Control-Allow-OriginAllow-MethodsAllow-Headers 等。
开发必备 后端正确配置 CORS 头,前端处理凭证和预检流程。

理解 CORS 是前后端协同开发的基础,正确配置可避免 80% 的跨域问题。务必通过服务端控制资源权限,而非关闭浏览器安全设置!

相关推荐
方圆想当图灵2 分钟前
关于 Nacos 在 war 包部署应用关闭部分资源未释放的原因分析
后端
大模型真好玩7 分钟前
深入浅出LangChain AI Agent智能体开发教程(四)—LangChain记忆存储与多轮对话机器人搭建
前端·人工智能·python
Lemon程序馆13 分钟前
今天聊聊 Mysql 的那些“锁”事!
后端·mysql
龙卷风040515 分钟前
使用本地IDEA连接服务器远程构建部署Docker服务
后端·docker
vv安的浅唱20 分钟前
Golang基础笔记七之指针,值类型和引用类型
后端·go
陪我一起学编程31 分钟前
MySQL创建普通用户并为其分配相关权限的操作步骤
开发语言·数据库·后端·mysql·oracle
帅夫帅夫31 分钟前
深入理解 JWT:结构、原理与安全隐患全解析
前端
Struggler28140 分钟前
google插件开发:如何开启特定标签页的sidePanel
前端
爱编程的喵1 小时前
深入理解JSX:从语法糖到React的魔法转换
前端·react.js