如何配置跨域请求（CORS）策略？

<think>好的，我现在需要帮助用户了解如何配置CORS策略。首先，我得回忆一下CORS的基本概念和相关HTTP头部。根据用户提供的引用内容，特别是引用[1]和[4]，CORS涉及同源策略和如何通过HTTP头部来允许跨域请求。 首先，我应该解释什么是同源策略，因为这是CORS存在的原因。根据引用[2]和[3]，同源策略是为了安全考虑，防止恶意网站窃取数据。需要简单说明同源的定义，比如协议、域名、端口一致。 接下来，用户想知道如何配置CORS。根据引用[1]和[4]，配置主要在服务器端设置特定的HTTP响应头，比如Access-Control-Allow-Origin。需要分步骤讲解，可能包括允许特定来源、处理预检请求、允许的方法和头部，以及携带凭证等。 还需要注意区分简单请求和预检请求。简单请求直接发送，而预检请求会先发送OPTIONS请求。这时候服务器需要正确响应OPTIONS请求，设置Access-Control-Allow-Methods和Access-Control-Allow-Headers等头部。 另外，用户可能对具体代码示例感兴趣，比如如何在Node.js或Nginx中配置。根据引用[4]，使用fetch的例子，但用户可能需要服务器端的配置示例。比如在Express中间件中设置响应头，或者在Nginx配置中添加头信息。 还要提到最佳实践，比如限制允许的来源，而不是使用通配符*，特别是当需要携带cookie时。同时，设置缓存预检请求的时间，减少重复请求，使用Access-Control-Max-Age。 需要注意用户提供的引用中有关于安全的部分，比如引用[2]提到同源策略的安全目的，所以在配置CORS时也要强调安全性，避免过于宽松的设置导致安全漏洞。 可能还需要解答常见问题，比如如何处理多个域名，或者动态允许来源。这时候可以建议读取Origin头，验证是否在允许列表中，然后动态设置Access-Control-Allow-Origin。 总结步骤应该包括：设置允许的来源、方法、头部，处理预检请求，配置缓存，安全注意事项，以及具体代码示例。确保覆盖前后端的配置，因为CORS需要服务器端的支持，而前端只需要正常发送请求即可，如引用[4]中的fetch例子。 最后，生成相关问题，可能涉及CORS的安全风险、预检请求的细节、处理凭证的方法等，确保用户能进一步探索相关主题。</think>### 如何配置跨域资源共享（CORS）策略？ #### 一、CORS 的核心原理 跨域资源共享（CORS）通过在 HTTP 响应头中添加特定字段，允许服务器声明哪些外部域可以访问其资源，从而绕过浏览器的同源策略限制[^2]。同源策略要求协议、域名、端口完全一致，否则会拦截跨域请求[^3]。 #### 二、CORS 配置步骤 1. **设置允许的来源** 在服务器响应头中添加 `Access-Control-Allow-Origin`，指定允许的域名： - 允许单个域名：`Access-Control-Allow-Origin: https://example.com` - 允许所有域名（慎用）：`Access-Control-Allow-Origin: *` 2. **处理预检请求（Preflight Request）** 对于复杂请求（如 `PUT`、自定义头部），浏览器会先发送 `OPTIONS` 请求进行预检。需配置以下头部： - `Access-Control-Allow-Methods`: 允许的 HTTP 方法（如 `GET, POST, PUT`） - `Access-Control-Allow-Headers`: 允许的请求头（如 `Content-Type, Authorization`） - `Access-Control-Max-Age`: 预检结果缓存时间（如 `86400` 秒）[^4] 3. **允许携带凭证（如 Cookies）** 若需跨域请求携带凭证，需设置： - `Access-Control-Allow-Credentials: true` 同时，`Access-Control-Allow-Origin` 不能为 `*`，需指定具体域名。 #### 三、代码示例 1. **Node.js (Express)** ```javascript app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', 'https://example.com'); res.header('Access-Control-Allow-Methods', 'GET, POST, PUT'); res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization'); res.header('Access-Control-Allow-Credentials', 'true'); res.header('Access-Control-Max-Age', '86400'); next(); }); ``` 2. **Nginx 配置** ```nginx location /api/ { add_header 'Access-Control-Allow-Origin' 'https://example.com'; add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT'; add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Max-Age' '86400'; } ``` #### 四、安全注意事项 - **避免使用通配符**：`Access-Control-Allow-Origin: *` 会导致资源完全公开，可能引发安全风险[^1]。 - **动态域名白名单**：可根据请求的 `Origin` 头动态验证是否在允许列表中。 - **限制请求方法与头部**：仅开放必要的 HTTP 方法和请求头，减少攻击面。 #### 五、常见问题排查 - **预检请求失败**：检查服务器是否正确响应 `OPTIONS` 请求并返回所需头部。 - **凭证未生效**：确保 `Access-Control-Allow-Origin` 为具体域名且 `Access-Control-Allow-Credentials` 为 `true`。 - **缓存问题**：通过 `Access-Control-Max-Age` 减少重复预检请求。 ---