解决Loco-RS框架中的CORS跨域问题

在前后端分离的开发模式中，跨域资源共享(CORS)是一个常见的技术挑战。本文将以Loco-RS框架为例，深入分析CORS问题的成因，并提供两种实用的解决方案。

问题背景

当使用Loco-RS框架(0.14.0版本)开发REST API后端，同时使用SolidStart构建前端应用时，开发者可能会遇到浏览器控制台报错："Access to fetch at 'http://localhost:5150/api/auth/login' from origin 'http://localhost:3000' has been blocked by CORS policy"。这是由于浏览器同源策略的安全限制导致的。

技术原理分析

CORS机制是现代浏览器实施的安全策略，它限制了不同源(协议+域名+端口)之间的资源请求。在开发环境中，前端应用通常运行在3000端口，而后端API服务运行在5150端口，这被视为不同的源。

当浏览器检测到跨域请求时，会先发送一个OPTIONS方法的预检请求(preflight)，询问服务器是否允许实际请求。如果服务器没有正确响应这个预检请求，浏览器就会阻止后续的实际请求。

解决方案一：Vite代理配置

对于使用Vite构建的前端项目，最优雅的解决方案是配置开发服务器代理：

1. 在vite.config.js中添加代理配置：

export default defineConfig({
    server: {
        proxy: {
            "/api": {
                target: "http://127.0.0.1:5150",
                changeOrigin: true,
                secure: false,
            },
        },
    },
})

2. 修改前端请求代码，移除完整URL路径：

const server_api_url = import.meta.env.VITE_API_SERVER_URL ?? 'api';

这种方法将所有以/api开头的请求转发到后端服务器，避免了浏览器的跨域检查，同时保持了开发和生产环境配置的一致性。

解决方案二：启用Loco-RS的CORS中间件

如果希望直接处理跨域请求，可以在Loco-RS后端启用CORS中间件：

1. 在config/middleware.yaml中添加配置：

middlewares:
  cors:
    enable: true
    allow_origins:
      - '*'

2. 确保前端请求代码使用正确的Content-Type头部：

headers: {
    "Content-Type": "application/json",
    "Accept": "application/json"
}

这种方法通过服务器响应正确的CORS头部来告知浏览器允许跨域请求。虽然配置简单，但在生产环境中应谨慎使用通配符(*)，最好指定具体的允许来源。

最佳实践建议

1. 开发环境推荐使用代理方案，它更接近生产环境的部署方式
2. 生产环境应严格限制允许的源，避免使用通配符
3. 对于复杂的API请求(如包含自定义头部的请求)，需要额外配置CORS中间件的allowed_headers选项
4. 始终确保OPTIONS方法的预检请求能够返回200状态码

通过理解CORS机制和掌握这两种解决方案，开发者可以轻松应对Loco-RS框架中的跨域问题，实现前后端的顺畅协作。