Nginx配置跨域請求

一、從nginx配置跨域請求別人的服務接口

1、如果前端應用向其他網站的API發送請求，則需要使用nginx作為反向代理服務器。首先需要在服務器上安裝nginx，並在nginx.conf文件中添加以下內容：

location /api/ {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    if ($request_method = 'OPTIONS') {
        return 204;
    }
    proxy_pass http://example.com/;
}

其中，/api/是本地服務器上的路徑，http：//example.com/是遠程服務器上的路徑，這裡需要修改成實際的API路徑。

2、以上配置中的add_header將響應頭中的Access-Control-Allow-Origin屬性設置為任意域名，Access-Control-Allow-Methods屬性設置為GET、POST和OPTIONS方法，Access-Control-Allow-Headers屬性設置為允許的請求頭。如果請求方法為OPTIONS，則將響應狀態碼設置為204，表示已經接受請求。

3、在修改了nginx.conf之後，需要重新啟動nginx。

二、nginx設置跨域請求

1、如果前端應用向本地服務器發送請求，則需要將allow-origin設置為本地IP地址或域名，可以在nginx.conf文件中添加以下內容：

server {
     listen       80;
     server_name  localhost;
     location / {
         add_header 'Access-Control-Allow-Origin' 'http://127.0.0.1:8080'; # 允許所有的請求都會處理允許跨域 
         add_header 'Access-Control-Allow-Credentials' 'true';
         root   html;
         index  index.html;
     }
}

2、以上配置中的allow-origin將請求頭中的Access-Control-Allow-Origin屬性設置為本地IP地址或域名，並且設置Access-Control-Allow-Credentials為true，表示允許發送cookie。這裡設置為http://127.0.0.1:8080，需要修改成實際使用的地址和端口號。

3、在修改了nginx.conf之後，需要重新啟動nginx。

三、nginx怎麼配置域名

1、首先需要將域名指向服務器IP地址。

2、在nginx.conf文件中添加以下內容：

server {
     listen       80;
     server_name  example.com;
     location / {
         add_header 'Access-Control-Allow-Origin' 'http://example.com'; # 允許所有的請求都會處理允許跨域 
         add_header 'Access-Control-Allow-Credentials' 'true';
         root   html;
         index  index.html;
     }
}

3、以上配置中的server_name將請求頭中的Access-Control-Allow-Origin屬性設置為域名，並且設置Access-Control-Allow-Credentials為true，表示允許發送cookie。這裡設置為example.com，需要修改成實際使用的域名。

4、在修改了nginx.conf之後，需要重新啟動nginx。

四、正確的nginx跨域配置

1、正確的nginx跨域配置需要在請求頭中添加Access-Control-Allow-Origin、Access-Control-Allow-Credentials等屬性，這需要在nginx.conf文件中添加以下內容：

server {
     listen       80;
     server_name  example.com;
     location / {
         add_header 'Access-Control-Allow-Origin' 'http://example.com'; # 允許所有的請求都會處理允許跨域 
         add_header 'Access-Control-Allow-Credentials' 'true';
         add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
         add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
         add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
         root   html;
         index  index.html;
     }
}

2、以上配置中的add_header將響應頭中的Access-Control-Allow-Origin屬性設置為域名，Access-Control-Allow-Credentials屬性設置為true，Access-Control-Allow-Methods屬性設置為GET、POST和OPTIONS方法，Access-Control-Allow-Headers屬性設置為允許的請求頭，Access-Control-Expose-Headers屬性設置為響應頭中允許被訪問的屬性。

3、在修改了nginx.conf之後，需要重新啟動nginx。

五、前後端分離nginx配置詳解

1、前後端分離的情況下需要配置nginx將所有靜態資源、API請求等轉發至後端服務器，可以在nginx.conf文件中添加以下內容：

server {
    listen       80;
    server_name  example.com;

    location /api {
        proxy_set_header Host $host;  
        proxy_set_header X-Real-IP $remote_addr;  
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  
        proxy_pass http://127.0.0.1:8000; 
    }

    location / {
        root   /home/user/example.com/build;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

2、以上配置中的location /api將請求轉發至API服務器，proxy_set_header設置請求頭，proxy_pass設置API服務器地址。location /將靜態資源轉發至/build文件夾下，如果找不到對應的文件則轉發至index.html。

3、在修改了nginx.conf之後，需要重新啟動nginx。

六、nginx跨域怎麼配置

1、nginx跨域配置需要在nginx.conf文件中添加以下內容：

server {
    listen      80;
    server_name example.com;

    location / {
        add_header  'Access-Control-Allow-Origin' '*';
        add_header  'Access-Control-Allow-Methods' 'GET, POST, DELETE, PUT, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers';
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }
     }
}

2、以上配置中的add_header將響應頭中的Access-Control-Allow-Origin屬性設置為任意域名，Access-Control-Allow-Methods屬性設置為GET、POST、DELETE、PUT和OPTIONS方法，Access-Control-Allow-Headers屬性設置為允許的請求頭，if語句用於處理預檢請求。

3、在修改了nginx.conf之後，需要重新啟動nginx。

七、nginx配置請求過濾

1、nginx可以過濾惡意請求，可以在nginx.conf文件中添加以下內容：

http {
    limit_req_zone $binary_remote_addr zone=black:10m rate=20r/m;

    server {
        listen 80;
        server_name example.com;

        location / {
            limit_req zone=black burst=5;
            proxy_pass http://upstream;
        }
    }
}

2、以上配置中的limit_req_zone指定限制訪問區域，$binary_remote_addr表示IP地址，zone=black表示黒名單，10m表示內存大小，rate=20r/m表示每分鐘限制20個請求。location /中的limit_req限制請求速率，burst定義在觸發限制前允許的突發數量，proxy_pass代表轉發至後端應用。

3、在修改了nginx.conf之後，需要重新啟動nginx。

八、nginx跨域配置詳解

1、通過以上幾種方法，nginx可以進行跨域配置。這些方法包括將請求轉發至其他服務器、設置請求頭中的Access-Control-Allow-Origin等屬性、設置允許的請求頭、過濾惡意請求等。根據具體的應用場景，選擇相應的方法進行配置。

2、在修改了nginx.conf之後，需要重新啟動nginx。