快捷導(dǎo)航

如何通過(guò)nginx解決跨域問(wèn)題

更新時(shí)間：2026年05月06日 08:54:53 作者：人生匆匆

文章描述了在使用Nginx版本1.29.1配置代理時(shí)遇到的跨域問(wèn)題,由于響應(yīng)中缺少Access-Control-Allow-Origin頭部,導(dǎo)致從10.20.4.1訪問(wèn)10.20.4.2:5000時(shí)出現(xiàn)跨域錯(cuò)誤,通過(guò)配置Nginx以添加該頭部,問(wèn)題得到了解決,感興趣的朋友跟隨小編一起看看吧

nginx版本 1.29.1

問(wèn)題
10.20.4.1 訪問(wèn)這個(gè)10.20.4.2:5000服務(wù)跨域了，麻煩處理一下
跨域報(bào)錯(cuò)

根據(jù)您圖片中的錯(cuò)誤信息，前端運(yùn)行在 http://10.20.4.1，試圖向 http://10.20.4.2:50000/upload發(fā)送 POST 請(qǐng)求，但被 CORS 策略阻止，因?yàn)轫憫?yīng)中沒(méi)有 Access-Control-Allow-Origin頭部。

應(yīng)該5000是python端口

我采用了nginx代理，添加允許跨域

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
    worker_connections 1024;
}
http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;
    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
    access_log /var/log/nginx/access.log main;
    sendfile on;
    keepalive_timeout 65;
    # 動(dòng)態(tài)設(shè)置允許的CORS源
    # 1. 檢查 map 塊：確保包含 http://10.20.4.1
    map $http_origin $cors_allowed_origin {
        default "";
        "http://10.20.4.1" "http://10.20.4.1"; # 必須存在這一行
        "http://10.20.4.2" "http://10.20.4.2"; # 必須存在這一行
        # ... 其他允許的來(lái)源
    }
    server {
        listen 50000;
        server_name 10.20.4.2;
        # 2. 檢查 server 或 location 塊：確保添加了 CORS 頭
        location / {
            # 處理 OPTIONS 預(yù)檢請(qǐng)求
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' $cors_allowed_origin;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
                add_header 'Access-Control-Allow-Headers' '*';
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Length' 0;
                add_header 'Content-Type' 'text/plain; charset=utf-8';
                return 204;
            }
            # 反向代理到后端
            proxy_pass http://10.20.4.2:5000;
            # ... 其他 proxy_set_header ...
            # 為實(shí)際響應(yīng)添加 CORS 頭，使用 always 確保任何狀態(tài)碼都添加
            add_header 'Access-Control-Allow-Origin' $cors_allowed_origin always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' '*' always;
        }
    }
}

測(cè)試實(shí)際 POST 請(qǐng)求

此命令模擬前端實(shí)際發(fā)送的 POST 請(qǐng)求，檢查響應(yīng)是否包含 CORS 頭部。

curl -X OPTIONS "http://10.20.4.2:50000" \
  -H "Origin: http://10.20.4.1" \
  -H "Access-Control-Request-Method: POST" \
  -H "Access-Control-Request-Headers: content-type" \
  -v