如何在Nginx中配置解决api.glossgenius.com接口CORS跨域访问报错问题

你遇到的是典型的跨域资源共享限制问题，可通过Nginx配置反向代理统一转发API请求解决，无需修改第三方API服务配置，操作步骤如下：

步骤1：调整前端请求路径 #

将前端代码中所有直接请求https://api.glossgenius.com/的接口，改为请求你自有域名下的统一代理路径，例如：

原请求地址：https://api.glossgenius.com/v3/web/portfolio_images?slug=meganhammett
调整后请求地址：https://studio21md.com/api/v3/web/portfolio_images?slug=meganhammett

步骤2：修改Nginx配置 #

完整的Nginx配置参考如下，在原有配置基础上新增API代理块和CORS头配置即可：

server {
    listen       80;
    server_name  www.studio21md.com studio21md.com;
    #charset koi8-r;
    #access_log  logs/host.access.log  main;

    # 新增API代理配置块
    location /api/ {
        # 转发请求到glossgenius的API服务
        proxy_pass https://api.glossgenius.com/;
        proxy_set_header Host api.glossgenius.com;
        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 "https://studio21md.com";
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
        add_header Access-Control-Allow-Headers "Content-Type, Authorization";
        add_header Access-Control-Allow-Credentials true;

        # 处理OPTIONS预检请求，直接返回204无需转发到后端
        if ($request_method = OPTIONS) {
            return 204;
        }
    }

    location / {
        proxy_pass   https://meganhammett.glossgenius.com;
        proxy_set_header Host meganhammett.glossgenius.com;
        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;
    }
}

注意：如果你当前站点已经配置了HTTPS（443端口的server块），需要将上述/api/代理块同步添加到443的server配置中。

步骤3：生效配置并验证 #

• 执行nginx -t测试配置语法是否正确，返回success即为合法
• 执行nginx -s reload重载Nginx配置
• 清空浏览器缓存后重新访问站点，验证功能是否恢复正常

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