个人名片
🎓作者简介：java领域优质创作者
🌐个人主页：码农阿豪
📞工作室：新空间代码工作室（提供各种软件服务）
💌个人邮箱：[2435024119@qq.com]
📱个人微信：15279484656
🌐个人导航网站：www.forff.top
💡座右铭：总有人要赢。为什么不能是我呢？
- 专栏导航：
码农阿豪系列专栏导航
面试专栏：收集了java相关高频面试题，面试实战总结🍻🎉🖥️
Spring5系列专栏：整理了Spring5重要知识点与实战演练，有案例可直接使用🚀🔧💻
Redis专栏：Redis从零到一学习分享，经验总结，案例实战💐📝💡
全栈系列专栏：海纳百川有容乃大，可能你想要的东西里面都有🤸🌱🚀
目录
- CORS跨域问题全解：原理、问题与解决方案
- 一、什么是CORS？
- 二、CORS的工作原理
- 1. 简单请求
- 2. 预检请求
- 三、CORS常见问题及解决方法
- 1. 预检请求失败
- 2. `Access-Control-Allow-Origin`头缺失或不正确
- 3. 自定义头导致CORS失败
- 4. 使用带认证的跨域请求
- 5. 跨域时使用`Content-Type: application/json`
- 四、开发环境中的CORS问题
- 1. 使用Webpack DevServer的代理
- 2. 使用ngrok进行开发
- 五、生产环境中的CORS问题
- 1. 配置Nginx处理CORS
- 六、总结
CORS跨域问题全解：原理、问题与解决方案
跨域资源共享（CORS，Cross-Origin Resource Sharing）是一个浏览器安全机制，用于防止跨站脚本攻击。CORS允许浏览器向跨域的服务器发起请求，但前提是该服务器必须在响应头中明确允许这样的请求。在这篇博客中，我们将详细探讨CORS的工作原理、常见问题以及如何在开发过程中有效地处理这些问题。
一、什么是CORS？
在现代Web开发中，浏览器的同源策略（Same-Origin Policy）是一种重要的安全策略。它限制了从一个源（协议、域名和端口）加载的文档或脚本，与来自不同源的资源进行交互。这种限制防止了恶意网站在未经用户同意的情况下访问敏感数据。
CORS是W3C标准之一，用于绕过同源策略的限制。在CORS机制下，服务器通过设置适当的HTTP头，告知浏览器允许哪些源访问其资源。CORS请求分为两类：简单请求（Simple Requests）和预检请求（Preflight Requests）。
二、CORS的工作原理
1. 简单请求
简单请求是指满足以下条件的请求：
- 使用GET、POST或HEAD方法。
- 请求中仅包含以下任一首部：
Accept、Accept-Language、Content-Language、Content-Type（值仅限于application/x-www-form-urlencoded、multipart/form-data或text/plain）、DPR、Downlink、Save-Data、Viewport-Width、Width。
如果请求满足这些条件，浏览器直接发送请求，服务器响应时在HTTP头中添加Access-Control-Allow-Origin来允许跨域访问。
例如，前端代码：
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
服务器响应头：
HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Content-Type: application/json
在上述情况下，浏览器不会进行预检请求，而是直接发送实际请求，并根据响应中的CORS头决定是否允许前端访问。
2. 预检请求
如果请求不符合简单请求的条件（如使用了自定义头，或方法是PUT、DELETE等），浏览器会在发送实际请求前，首先发起一个OPTIONS请求（称为预检请求），以确认服务器是否允许该跨域请求。
预检请求示例：
OPTIONS /resource HTTP/1.1
Host: api.example.com
Origin: http://localhost:3000
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type, Authorization
服务器响应：
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
如果服务器响应了适当的CORS头信息，浏览器才会继续发送实际请求，否则请求被阻止。
三、CORS常见问题及解决方法
1. 预检请求失败
问题描述：预检请求（OPTIONS）没有正确返回CORS头信息，导致后续的实际请求失败。
解决方案：确保服务器端正确处理了预检请求，返回以下头信息：
Access-Control-Allow-Origin: 指定允许的来源，通常是请求的来源或者通配符*。Access-Control-Allow-Methods: 列出允许的HTTP方法，如GET, POST, PUT, DELETE, OPTIONS。Access-Control-Allow-Headers: 列出允许的自定义头，如Authorization, Content-Type。
例如，在Node.js的Express中，可以使用cors中间件简化CORS配置：
const cors = require('cors');
const app = express();
app.use(cors({
origin: 'http://localhost:3000',
methods: ['GET', 'POST', 'PUT', 'DELETE'],
allowedHeaders: ['Content-Type', 'Authorization'],
}));
2. Access-Control-Allow-Origin头缺失或不正确
问题描述：服务器返回的响应中没有包含Access-Control-Allow-Origin头，或者头信息不匹配导致浏览器拒绝访问。
解决方案：确保在服务器的响应中动态设置Access-Control-Allow-Origin，匹配请求的来源，或者使用通配符*允许所有来源。
在Nginx中，可以通过配置文件设置：
location /api/ {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
return 204;
}
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
}
3. 自定义头导致CORS失败
问题描述：使用了自定义头（如Authorization），但服务器未返回Access-Control-Allow-Headers导致CORS失败。
解决方案：在服务器上配置CORS时，确保将自定义头添加到Access-Control-Allow-Headers列表中。
例如，在Express.js中：
app.use(cors({
origin: 'http://localhost:3000',
methods: ['GET', 'POST', 'PUT', 'DELETE'],
allowedHeaders: ['Content-Type', 'Authorization'],
}));
4. 使用带认证的跨域请求
问题描述：当跨域请求需要携带认证信息（如cookies或Authorization头）时，默认情况下，浏览器不会将这些信息发送到跨域的请求中。
解决方案：客户端需要在请求中设置withCredentials为true，服务器端则需要确保返回Access-Control-Allow-Credentials: true。
前端代码：
axios.get('https://api.example.com/data', {
withCredentials: true
})
.then(response => console.log(response))
.catch(error => console.error('Error:', error));
服务器端响应头：
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Credentials: true
5. 跨域时使用Content-Type: application/json
问题描述：某些情况下，跨域请求发送JSON数据时，服务器需要明确允许Content-Type: application/json。
解决方案：确保服务器的CORS配置中允许Content-Type头。
Nginx示例：
add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
四、开发环境中的CORS问题
在开发环境中，前端通常运行在本地开发服务器（如localhost:3000），而后端API可能在另一个域（如api.example.com）上运行。为了解决开发环境中的CORS问题，常见的方法是使用代理服务器。
1. 使用Webpack DevServer的代理
在使用Webpack或Vue CLI进行开发时，可以在开发服务器中配置代理，将请求转发到目标服务器以避免跨域问题。
Webpack配置示例：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://api.example.com',
changeOrigin: true,
secure: false,
pathRewrite: {'^/api': ''},
}
}
}
};
在上述配置中，所有发往/api的请求都会被代理到https://api.example.com，并且不受同源策略的限制。
2. 使用ngrok进行开发
ngrok是一种将本地服务器暴露到公网的工具，适用于跨域调试。通过ngrok，可以生成一个公网URL，将请求转发到本地服务器，从而避免CORS问题。
使用示例：
ngrok http 3000
ngrok会生成一个URL（如https://abcd1234.ngrok.io），你可以在前端使用这个URL替代localhost:3000，从而避免跨域问题。
五、生产环境中的CORS问题
在生产环境中，跨域问题通常应通过配置服务器CORS头信息来解决，而不是依赖代理或其他临时方案。确保服务器配置正确，处理所有跨域请求的预检和实际请求。
1. 配置Nginx处理CORS
在Nginx中，可以通过配置CORS头信息来解决跨域问题。例如：
server {
listen 80;
server_name api.example.com;
location / {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
if ($request_method = 'OPTIONS') {
return 204;
}
proxy_pass http://backend_server;
}
}
``
`
此配置会处理所有跨域请求，并允许来自任何来源的请求（通过`*`），如果你有更严格的要求，可以根据需求调整`Access-Control-Allow-Origin`的值。
##### 2. 使用后端语言框架处理CORS
大多数后端语言和框架（如Spring Boot, Django, Flask等）都提供了内置的CORS支持，可以通过配置或中间件的方式轻松处理跨域请求。
例如，在Spring Boot中可以通过添加CORS配置类来处理：
```java
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:3000")
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
.allowedHeaders("*")
.allowCredentials(true);
}
}
六、总结
CORS是Web开发中一个重要的安全机制，能够有效防止跨站脚本攻击。理解CORS的工作原理及其常见问题，能够帮助开发者在前后端分离的项目中更好地处理跨域请求。在开发环境中，使用代理服务器或其他工具可以简化调试过程；在生产环境中，确保服务器正确配置CORS头信息是解决跨域问题的关键。
通过本篇博客的介绍，希望你能够对CORS有更深入的理解，并能够在实际开发中有效地应对和解决CORS相关的问题。无论是在开发阶段还是生产环境中，掌握这些技能都能显著提高你的Web应用的安全性和稳定性。
