M

MLOG

中文

解锁CORS（跨源资源共享）的奥秘，学习如何在您的Web应用中安全地启用跨域请求。本全面指南涵盖了从基础到高级配置的所有内容，确保不同源之间的无缝、安全通信。

揭秘CORS：跨源资源共享全面指南

在当今互联的Web世界中，应用程序经常需要访问来自不同源的资源。这正是跨源资源共享（Cross-Origin Resource Sharing, CORS）发挥作用的地方。CORS是一种关键的安全机制，它规定了Web浏览器如何处理从一个源（域、协议和端口）到另一个不同源的请求。理解CORS对于每个Web开发人员构建安全且功能完善的Web应用程序至关重要。

什么是同源策略？

在深入了解CORS之前，理解同源策略（Same-Origin Policy, SOP）至关重要。SOP是Web浏览器中实现的一项基本安全机制。其目的是防止一个网站上的恶意脚本访问另一个网站上的敏感数据。一个“源”由协议（如HTTP或HTTPS）、域名（如example.com）和端口号（如80或443）的组合来定义。如果两个URL共享相同的协议、域名和端口，则它们被认为是同源的。

示例：

SOP限制脚本从不同源访问资源，除非采取了像CORS这样的特定措施来允许它。

为什么需要CORS？

虽然同源策略对安全至关重要，但它也可能过于严格。许多现代Web应用程序依赖于从不同的服务器（如API或内容分发网络（CDN））获取数据。CORS提供了一种受控的方式来放宽SOP，允许合法的跨源请求，同时保持安全性。

考虑一个场景：一个托管在 http://example.com 上的Web应用程序需要从托管在 http://api.example.net 上的API服务器获取数据。如果没有CORS，浏览器会因为SOP而阻止此请求。CORS允许API服务器明确指定哪些源被允许访问其资源，从而使Web应用程序能够正常工作。

CORS的工作原理：基础知识

CORS通过客户端（浏览器）和服务器之间交换的一系列HTTP标头工作。服务器使用这些标头来通知浏览器是否允许访问所请求的资源。涉及的关键HTTP标头是 Access-Control-Allow-Origin。

场景1：简单请求

“简单请求”是指满足特定条件的GET、HEAD或POST请求（例如，Content-Type 标头是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 之一）。在这种情况下，浏览器直接向服务器发送请求，服务器则用 Access-Control-Allow-Origin 标头进行响应。

客户端请求 (来自 http://example.com):

GET /data HTTP/1.1
Host: api.example.net
Origin: http://example.com

服务器响应 (来自 http://api.example.net):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Content-Type: application/json

{
  "data": "Some data from the server"
}

在此示例中，服务器响应了 Access-Control-Allow-Origin: http://example.com，表示允许来自 http://example.com 的请求。如果请求中的源与 Access-Control-Allow-Origin 标头中的值不匹配（或者该标头不存在），浏览器将阻止响应，并阻止客户端脚本访问数据。

场景2：预检请求 (用于复杂请求)

对于更复杂的请求，例如使用PUT、DELETE等HTTP方法或带有自定义标头的请求，浏览器会使用HTTP OPTIONS方法执行一个“预检”（preflight）请求。这个预检请求在发送实际请求之前向服务器请求许可。服务器会用标头响应，指定允许哪些方法、标头和源。

客户端预检请求 (来自 http://example.com):

OPTIONS /data HTTP/1.1
Host: api.example.net
Origin: http://example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header

服务器响应 (来自 http://api.example.net):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, PUT, DELETE
Access-Control-Allow-Headers: X-Custom-Header, Content-Type
Access-Control-Max-Age: 3600

标头解释：

如果服务器的预检响应表明请求被允许，浏览器则继续发送实际请求。否则，浏览器将阻止该请求。

客户端实际请求 (来自 http://example.com):

PUT /data HTTP/1.1
Host: api.example.net
Origin: http://example.com
X-Custom-Header: some-value
Content-Type: application/json

{
  "data": "Some data to be updated"
}

服务器响应 (来自 http://api.example.net):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Content-Type: application/json

{
  "status": "Data updated successfully"
}

常见的CORS标头

以下是您需要了解的关键CORS标头的分解说明：

不同后端语言中的CORS

实现CORS通常涉及配置您的服务器端应用程序以发送适当的CORS标头。以下是在各种语言和框架中执行此操作的示例：

Node.js与Express

您可以使用 cors 中间件包：

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

const app = express();

// 为所有源启用CORS（在生产环境中请谨慎使用）
app.use(cors());

// 或者，为特定源配置CORS
// app.use(cors({
//   origin: 'http://example.com'
// }));

app.get('/data', (req, res) => {
  res.json({ message: '已为所有源启用CORS！' });
});

app.listen(3000, () => {
  console.log('服务器正在端口3000上运行');
});

Python与Flask

您可以使用 Flask-CORS 扩展：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

# 或者，为特定源配置CORS
# CORS(app, resources={r"/api/*": {"origins": "http://example.com"}})

@app.route("/data")
def hello():
    return {"message": "已为所有源启用CORS！"}

if __name__ == '__main__':
    app.run(debug=True)

Java与Spring Boot

您可以使用注解或配置类在Spring Boot应用程序中配置CORS：

使用注解：

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = "http://example.com") // 允许来自 http://example.com 的请求
public class DataController {

    @GetMapping("/data")
    public String getData() {
        return "已为 http://example.com 启用CORS！";
    }
}

使用配置：

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("/data")
                .allowedOrigins("http://example.com") // 允许来自 http://example.com 的请求
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}

PHP

 "已为 http://example.com 启用CORS！");
echo json_encode($data);
?>

CORS与安全注意事项

虽然CORS启用了跨源请求，但安全地实现它至关重要。以下是一些重要的考虑因素：

CORS问题排查

CORS问题调试起来可能令人沮丧。以下是一些常见问题及其解决方法：

调试工具：

高级CORS场景

虽然基本的CORS概念相对直接，但还有一些更高级的场景需要考虑：

CORS最佳实践

为确保安全高效的CORS实施，请遵循以下最佳实践：

结论

CORS是一种关键的安全机制，它能够在Web应用程序中实现受控的跨源请求。理解CORS的工作原理以及如何正确配置它，对于每个Web开发人员都至关重要。通过遵循本全面指南中概述的指导方针和最佳实践，您可以构建安全且功能完善的Web应用程序，与来自不同源的资源无缝交互。

请记住，始终要优先考虑安全性，避免使用过于宽松的CORS配置。通过仔细考虑CORS设置的安全影响，您可以保护您的应用程序和数据免受未经授权的访问。

我们希望本指南能帮助您揭开CORS的神秘面纱。编码愉快！