当前位置：首页 > article >正文

【前端跨域】CORS：跨域资源共享的机制与实现

article 2025/3/6 22:36:28

在现代Web开发中，跨域资源共享（Cross-Origin Resource Sharing，简称CORS）是一种非常重要的技术，用于解决浏览器跨域请求的限制

CORS允许服务器明确指定哪些外部源可以访问其资源，从而在保证安全的前提下实现跨域通信
本文将详细介绍CORS的工作原理、实现方式以及如何在实际开发中使用它

什么是CORS？

CORS是一种W3C标准，旨在解决浏览器跨域请求的限制

它通过在HTTP请求和响应中添加特定的头部信息，允许服务器声明哪些外部源可以访问其资源

CORS的核心思想是：服务器通过设置响应头来告诉浏览器，哪些跨域请求是被允许的

为什么需要CORS？

在Web开发中，前端应用通常需要从不同的源（域名、协议或端口）获取资源。例如，一个前端应用可能需要从API服务器获取数据，或者从CDN加载静态资源。然而，浏览器的同源策略（Same-Origin Policy）会阻止这些跨域请求，除非目标服务器明确允许

CORS提供了一种机制，使得服务器可以明确声明哪些外部源可以访问其资源，从而在保证安全的前提下实现跨域通信

工作原理

CORS的工作原理可以分为以下几个步骤：

简单请求（Simple Request）

对于某些简单的HTTP请求（如GET、POST，且请求头为特定类型），浏览器会直接发送请求，并在请求头中添加Origin字段，表示请求的来源

服务器收到请求后，会检查Origin字段，并在响应头中添加Access-Control-Allow-Origin字段，表示允许的源

如果服务器允许该源访问资源，浏览器就会正常处理响应

预检请求（Preflight Request）

对于某些复杂的HTTP请求（如PUT、DELETE，或带有自定义请求头的请求），浏览器会先发送一个预检请求（OPTIONS请求），以确认服务器是否允许该跨域请求

预检请求的请求头中包含Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段。服务器收到预检请求后，会检查这些字段，并在响应头中添加Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers字段，表示允许的源、方法和请求头

如果服务器允许该跨域请求，浏览器才会发送实际的请求。

带凭证的请求（Credentialed Request）

如果跨域请求需要携带凭证（如Cookies、HTTP认证信息等），浏览器会在请求头中添加Credentials字段

服务器需要在响应头中添加Access-Control-Allow-Credentials: true字段，表示允许带凭证的请求

实现

在实际开发中，CORS的实现主要依赖于服务器端的配置。以下是一些常见的服务器端配置示例：

允许所有源访问：Access-Control-Allow-Origin: *
这种配置允许所有外部源访问资源，适用于公开的API

允许特定源访问：Access-Control-Allow-Origin: https://example.com
这种配置只允许特定的外部源访问资源，适用于需要限制访问的场景

允许带凭证的请求：
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true
这种配置允许特定的外部源访问资源，并且允许带凭证的请求

允许特定的HTTP方法和请求头：
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
这种配置允许特定的HTTP方法和请求头，适用于复杂的跨域请求

实际应用

在实际开发中，CORS的实现通常依赖于后端框架或中间件。以下是一些常见后端框架的CORS配置示例：

提供了三种语言的实现方式：node.js、python 和 java

Node.js（Express框架）

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

app.use(cors({
  origin: 'https://example.com',
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

app.get('/data', (req, res) => {
  res.json({ message: 'Hello, CORS!' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Python（Django框架）

from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from django.views.decorators.http import require_http_methods
from corsheaders.middleware import CorsMiddleware

@csrf_exempt
@require_http_methods(["GET", "POST", "PUT", "DELETE"])
def data(request):
    response = JsonResponse({'message': 'Hello, CORS!'})
    response['Access-Control-Allow-Origin'] = 'https://example.com'
    response['Access-Control-Allow-Credentials'] = 'true'
    return response

Java（Spring Boot框架）

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

@RestController
@CrossOrigin(origins = "https://example.com", allowCredentials = "true", methods = {RequestMethod.GET, RequestMethod.POST, RequestMethod.PUT, RequestMethod.DELETE})
public class DataController {

    @GetMapping("/data")
    public String data() {
        return "Hello, CORS!";
    }
}