CORS跨域问题全解：原理、问题与解决方案

码农阿豪@新空间代码工作室

于 2024-08-19 12:00:47 发布

阅读量513

点赞数 12

分类专栏：包罗万象收集文章标签：前端 vue.js cors

本文链接：https://blog.csdn.net/weixin_44976692/article/details/141322062

版权

收集同时被 2 个专栏收录

348 篇文章 1 订阅

订阅专栏

包罗万象

43 篇文章 0 订阅

订阅专栏

个人名片

🎓作者简介：java领域优质创作者
🌐个人主页：码农阿豪
📞工作室：新空间代码工作室（提供各种软件服务）
💌个人邮箱：[2435024119@qq.com]
📱个人微信：15279484656
🌐个人导航网站：www.forff.top
💡座右铭：总有人要赢。为什么不能是我呢？

专栏导航：

码农阿豪系列专栏导航
面试专栏：收集了java相关高频面试题，面试实战总结🍻🎉🖥️
Spring5系列专栏：整理了Spring5重要知识点与实战演练，有案例可直接使用🚀🔧💻
Redis专栏：Redis从零到一学习分享，经验总结，案例实战💐📝💡
全栈系列专栏：海纳百川有容乃大，可能你想要的东西里面都有🤸🌱🚀

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应用的安全性和稳定性。

码农阿豪@新空间代码工作室

关注

12
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
CORS跨域问题全解：原理、问题与解决方案

在现代Web开发中，浏览器的同源策略（Same-Origin Policy）是一种重要的安全策略。它限制了从一个源（协议、域名和端口）加载的文档或脚本，与来自不同源的资源进行交互。这种限制防止了恶意网站在未经用户同意的情况下访问敏感数据。CORS是W3C标准之一，用于绕过同源策略的限制。在CORS机制下，服务器通过设置适当的HTTP头，告知浏览器允许哪些源访问其资源。CORS请求分为两类：简单请求（Simple Requests）和预检请求（Preflight Requests）。问题描述。
复制链接

扫一扫