如何正确配置CORS？仅允许http://localhost:3000访问Web应用

嘿，我看你已经找对了方向，用Nginx的$http_origin变量来匹配指定源，我帮你补全并优化这段配置，确保它能完美实现“仅接受http://localhost:3000请求”的需求。

完整的Nginx配置代码 #

location / {
    set $cors '';
    # 精确匹配允许的Origin，避免模糊匹配带来的安全风险
    if ($http_origin ~ '^http://localhost:3000$') {
        set $cors 'true';
    }
    # 识别浏览器发送的OPTIONS预检请求
    if ($request_method = 'OPTIONS') {
        set $cors "${cors}options";
    }
    # 为正常请求添加跨域响应头
    if ($cors = 'true') {
        add_header 'Access-Control-Allow-Origin' "$http_origin" always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;
    }
    # 直接处理OPTIONS预检请求，返回204状态码（无需后端处理）
    if ($cors = 'trueoptions') {
        add_header 'Access-Control-Allow-Origin' "$http_origin" always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;
        return 204;
    }
    # 这里替换成你原本的业务逻辑，比如反向代理到后端服务
    # proxy_pass http://your-backend-service;
    # 或者静态文件服务配置
    # root /path/to/your/static/files;
}

配置细节说明 #

• 精确匹配Origin：用^http://localhost:3000$的正则表达式精确匹配，防止类似http://localhost:3000.attacker.com的恶意域名绕过限制。
• 预检请求处理：浏览器在发送复杂跨域请求（比如带自定义请求头、PUT/DELETE方法）前，会先发送OPTIONS预检请求，这里专门处理这类请求，直接返回204状态码，减少后端服务的压力。
• always关键字：确保跨域响应头在所有响应中都被添加，包括404、500等错误响应，避免前端因错误响应缺少跨域头而抛出异常。
• 凭证支持：Access-Control-Allow-Credentials: true允许前端请求携带Cookie、HTTP认证信息等凭证，如果你的业务不需要，可以删除这一行，同时Access-Control-Allow-Origin也可以直接写死为http://localhost:3000。

后续操作 #

修改完配置后，记得重载Nginx使配置生效：

sudo nginx -s reload

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