如何配置服务器端以允许跨域请求？

服务器端配置跨域请求

背景介绍

在现代Web开发中，前后端分离的架构越来越常见，这种架构提高了开发效率和系统的可维护性，但也带来了跨域资源共享（CORS, Cross-Origin Resource Sharing）的问题，浏览器出于安全考虑，会阻止不同源之间的请求，以防止潜在的安全风险，如跨站请求伪造（CSRF），本文将详细介绍如何在服务器端配置跨域请求，以解决这些问题。

什么是跨域？

跨域是指在浏览器中，来自不同域名、协议或端口的请求资源的行为。

请求 URL:http://example.com/api 和http://example.net/api 是跨域的。

请求 URL:https://example.com/api 和http://example.com/api 也是跨域的（因为协议不同）。

为什么需要跨域？

跨域策略（同源策略）是为了防止潜在的安全风险，CSRF 攻击，为了让不同来源的资源可以被共享，CORS 提供了一种安全的机制来允许服务器标识哪些域、方法、头部信息可以进行跨域请求。

CORS 的基本流程

当浏览器发出一个跨域请求时，会进行以下步骤：

1、简单请求：如果请求方法是 GET、POST、HEAD 并且满足其他特定条件，浏览器直接发起请求。

2、预检请求（Preflight Request）：如果请求包含自定义头部信息、非简单请求方法（如 PUT、DELETE），浏览器会先发出一个OPTIONS 请求以确认服务器是否允许跨域请求。

3、服务器响应：服务器响应头部中包含跨域相关的信息，浏览器根据这些信息决定是否允许跨域请求。

配置跨域的方式

跨域配置主要在后端服务器进行，不同的后端框架和服务器有不同的跨域配置方法，下面介绍几种常见的后端框架和服务器的跨域配置方式。

使用 Node.js (Express)

在 Express 中，可以使用 [CORS 中间件](https://github.com/expressjs/cors) 来轻松配置跨域支持。

安装 CORS 中间件

npm install cors

配置 CORS 中间件

const express = require('express');
const cors = require('cors');
const app = express();
// 允许所有来源的跨域请求
app.use(cors());
app.get('/', (req, res) => {
  res.send('Hello World!');
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

或者，只允许特定的来源：

app.use(cors({
  origin: 'http://example.com'
}));

配置 Nginx 反向代理

Nginx 作为反向代理服务器，也可以配置跨域。

Nginx 配置文件示例

server {
    listen       80;
    server_name  your-domain.com;
    location /api {
        proxy_pass http://target-server.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        # 添加 CORS 头
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    }
}

Spring Boot (Java)

在 Spring Boot 项目中，可以通过注解或全局配置来设置跨域支持。

使用 @CrossOrigin 注解

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class TestController {
    @CrossOrigin(origins = "http://localhost:5173") // 指定允许跨域的来源
    @GetMapping("/data")
    public String getData() {
        return "数据被获取到了";
    }
}

全局配置跨域

通过实现WebMvcConfigurer 接口并重写addCorsMappings 方法，在 Spring Boot 的配置类中统一设置跨域相关规则。

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("*") // 允许的跨域源，可以用 * 表示允许所有源；
                .allowedMethods("*") // 允许的请求方法，可以指定具体的，如："GET"、"POST"、"PUT"、"DELETE"
                .allowedHeaders("*") // 允许的请求头类型，可以指定具体的，如："Content-Type", "Authorization"
                .maxAge(24 * 60 * 60); // 设置请求最大有效时长，在这个时长内，重复的请求就不会发送预检请求
    }
}

Flask (Python)

在 Flask 中，可以使用flask-cors 来处理跨域请求。

安装 flask-cors

pip install flask-cors

配置 flask-cors

from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app) # 允许所有来源的跨域请求
@app.route('/')
def hello_world():
    return 'Hello, World!'
if __name__ == '__main__':
    app.run()

或者，只允许特定的来源：

CORS(app, resources={r"/*": {"origins": "http://example.com"}})

跨域问题是前后端分离架构中常见的挑战，但通过合理配置 CORS，可以有效解决这一问题，本文介绍了在不同后端框架和服务器上配置跨域的方法，包括 Node.js (Express)、Nginx、Spring Boot (Java) 和 Flask (Python)，希望这些内容能帮助开发者更好地理解和解决跨域问题。

各位小伙伴们，我刚刚为大家分享了有关“服务器端配置跨域请求”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！