OVH Cloud Web部署React项目：CORS问题与Varnish代理配置求助

1. 找到OVH的Varnish配置入口 #

登录OVH控制面板，进入你的Web服务管理页面，找到Varnish配置选项，即可编辑自定义VCL（Varnish Configuration Language）文件。

2. 定义后端API服务器 #

在VCL文件最开头，添加目标API的后端定义（如果API用HTTP，把.ssl设为false，.port改为80）：

backend urlapi {
    .host = "urlapi.com";
    .port = "443";
    .ssl = true; # 启用SSL连接到目标API
}

3. 编写请求转发规则（vcl_recv） #

在vcl_recv函数中，处理CORS预请求并转发/api路径的请求：

sub vcl_recv {
    # 处理CORS OPTIONS预请求，直接返回允许的头
    if (req.method == "OPTIONS") {
        set req.http.Access-Control-Allow-Origin = req.http.Origin;
        set req.http.Access-Control-Allow-Methods = "GET, POST, PUT, DELETE, OPTIONS";
        set req.http.Access-Control-Allow-Headers = "Content-Type, Authorization, X-Requested-With";
        set req.http.Access-Control-Max-Age = "86400";
        return (synth(200, "OPTIONS OK"));
    }

    # 匹配所有/api开头的请求，转发到目标API
    if (req.url ~ "^/api") {
        set req.backend_hint = urlapi; # 指定使用刚才定义的后端
        set req.http.Host = "urlapi.com"; # 修正请求的Host头为目标API域名
        unset req.http.Referer; # 可选：移除不必要的Referer头
    }
}

4. 配置响应CORS头（vcl_backend_response） #

在vcl_backend_response函数中，给响应添加CORS允许头，避免前端报错：

sub vcl_backend_response {
    # 为所有响应添加CORS允许头
    set beresp.http.Access-Control-Allow-Origin = req.http.Origin;
    set beresp.http.Access-Control-Allow-Methods = "GET, POST, PUT, DELETE, OPTIONS";
    set beresp.http.Access-Control-Allow-Headers = "Content-Type, Authorization, X-Requested-With";

    # 针对/api请求调整缓存策略（可选）
    if (bereq.url ~ "^/api") {
        # POST/PUT/DELETE等非GET请求不缓存
        if (bereq.method != "GET") {
            set beresp.ttl = 0s;
        }
        # 可选：允许前端缓存OPTIONS请求的结果
        if (bereq.method == "OPTIONS") {
            set beresp.ttl = 86400s;
        }
    }
}

5. 保存并测试 #

• 保存VCL配置后，OVH会自动重启Varnish生效。
• 测试：用curl访问你的域名的/api路径（比如curl https://your-ovh-domain.com/api/endpoint），检查是否返回目标API的响应。
• 前端测试：启动React应用，调用/api接口，确认CORS错误消失。

注意事项 #

• 确认你的OVH套餐支持自定义Varnish配置，部分基础套餐可能限制编辑VCL。
• 如果目标API有特殊的请求头要求，可以在vcl_recv中添加对应的头设置。
• 若遇到SSL连接问题，检查OVH的Varnish是否支持后端SSL（大部分最新套餐都支持）。

内容的提问来源于stack exchange，提问作者Lebonsavane