CORS（跨域资源共享）PPT 全面指南

什么是CORS？

CORS（Cross-Origin Resource Sharing）是一种浏览器机制，允许网页从不同源（域名、协议或端口）请求资源。它通过HTTP头部实现，是一种安全策略，用于限制跨域请求。

为什么需要CORS？

浏览器的同源策略会阻止跨域请求，但现代应用常需调用不同域下的API（如前后端分离）。CORS提供了一种受控的放松方式。

CORS工作机制

典型流程：

1. 浏览器发起跨域请求，自动添加Origin头部。
2. 服务器响应时设置Access-Control-Allow-Origin等头部。
3. 浏览器根据响应头决定是否允许访问。

关键HTTP头部

• Access-Control-Allow-Origin：指定允许的源，如*或具体域名。
• Access-Control-Allow-Methods：允许的HTTP方法（GET, POST等）。
• Access-Control-Allow-Headers：允许的自定义头部。
• Access-Control-Allow-Credentials：是否允许携带凭证（如cookies）。
• Access-Control-Max-Age：预检请求的缓存时间。

简单请求与预检请求

简单请求：使用GET、POST或HEAD，且无自定义头部，content-type为text/plain、multipart/form-data或application/x-www-form-urlencoded。直接发送实际请求。

预检请求：非简单请求（如PUT、DELETE或自定义头部），浏览器先发送OPTIONS请求（预检），服务器确认后发实际请求。

配置示例（Node.js + Express）

const express = require('express');
const cors = require('cors');
const app = express();

// 允许所有源
app.use(cors());

// 或自定义
app.use(cors({
  origin: 'https://example.com',
  methods: ['GET', 'POST'],
  credentials: true
}));

安全注意事项

• 避免使用*，明确指定可信源。
• 谨慎使用Access-Control-Allow-Credentials: true，此时origin不能为*。
• 限制允许的HTTP方法和头部。
• 利用Access-Control-Max-Age减少预检请求次数。

常见问题与调试

浏览器控制台报错“No 'Access-Control-Allow-Origin' header”是典型问题。检查服务器是否正确设置响应头，或使用浏览器插件（如CORS Unblock）进行测试（仅开发环境）。

PPT演示建议

将上述内容分为5页：

• 第1页：CORS定义与重要性
• 第2页：工作机制与HTTP头部
• 第3页：简单请求 vs 预检请求
• 第4页：后端配置示例（代码）
• 第5页：安全与调试

总结

CORS是跨域开发的核心知识。掌握其原理和配置，能有效解决前后端分离中的跨域问题。通过PPT演示，可更直观地传达要点。