Nginx解決前端跨域問題，Nginx反向代理跨域原理

================================

©Copyright 蕃薯耀2021-10-09

https://www.cnblogs.com/fanshuyao/

一、Nginx前端Ajax非簡單請求跨域問題

1、Ajax非簡單請求會提示跨域

Access to XMLHttpRequest at 'http://csgx.com:7001/csgx/jiHuaMap/test' 
from origin 'http://127.0.0.1:9000' has been blocked by CORS policy: 
Response to preflight request doesn
 
't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

headers中"Content-Type" : "application/json"就是非簡單請求

如下：

$("#btnTest").click(function(){
    $.ajax({  
        url : "http://127.0.0.1:10001/csgx2/jiHuaMap/test?ssotoken=xxx",  
        type : "post",  
        dataType : 
 
"json", 
        headers: {
            "Content-Type" : "application/json"
        },
        data : '{"id":"uuid", "bb": 10}',  
        complete : function(XMLHttpRequest, textStatus){  
            //console.log("textStatus="+textStatus);
        },  
        error : function(XMLHttpRequest, textStatus, errorThrown){  
            
 
if("error" == textStatus){  
                console.error("伺服器未響應，請稍候再試");
            }else{  
                console.error("請求失敗，textStatus=" + textStatus);
            }  
         },  
         success : function(data){  
             console.log(data);
         }  
    }); 
});

2、簡單請求

只要同時滿足以下條件就屬於簡單請求
(1)、請求方法是以下三種方法之一：GET、POST、HEAD
(2)、Http的頭資訊不超出以下幾種欄位：Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type。

(3)、Content-Type只限於三個值：application/x-www-form-urlencoded、multipart/form-data、text/plain

3、非簡單請求

會預檢請求 (preflight request)，即先預傳送OPTIONS的請求

第一次是瀏覽器使用OPTIONS方法發起一個預檢請求，第二次才是真正的非同步請求

第一次的預檢請求獲知伺服器是否允許該跨域請求：如果允許，才發起第二次真實的請求；如果不允許，則攔截第二次請求。

Access-Control-Max-Age用來指定本次預檢請求的有效期，單位為秒，在此期間不用發出另一條預檢請求。

二、通過Nginx反向代理解決Ajax非簡單請求跨域問題

1、nginx.conf 配置檔案在 http 模組最上面引入相應的配置檔案：

include config/*.conf;

引入具體如下：即新建立一個config資料夾，在資料夾下建立新的配置檔案

如：10001-csgx-cross.conf

server {
    listen       10001;
    #server_name  localhost;
 
    location /csgx {
        proxy_pass http://127.0.0.1:9000/csgx;
        #rewrite ^/csgx/(.*)$ /$1 break;
 
        #proxy_redirect off;
        proxy_set_header Host $host;  
        proxy_set_header X-Real-IP $remote_addr; 
        #關鍵需要在此處新增埠號變數,或者直接使用埠號8070
        proxy_set_header X-Forwarded-HOST $host:$server_port; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
 
    location /csgx2 {
 
        #   表示允許這個域跨域呼叫（客戶端傳送請求的域名和埠） 
        #   $http_origin動態獲取請求客戶端請求的域   不用*的原因是帶cookie的請求不支援*號
        #add_header Access-Control-Allow-Origin $http_origin;
        add_header Access-Control-Allow-Origin *;
 
        # 指定允許跨域的方法，*代表所有
        add_header Access-Control-Allow-Methods *;
 
        #帶cookie請求需要加上這個欄位，並設定為true
        add_header Access-Control-Allow-Credentials true;
 
        #   預檢命令的快取，如果不快取每次會發送兩次請求
        add_header Access-Control-Max-Age 3600;
 
        #add_header 'Content-Type' 'text/plain charset=UTF-8';
        #add_header 'Content-Length' 0;
 
         #   表示請求頭的欄位 動態獲取
        add_header Access-Control-Allow-Headers  $http_access_control_request_headers;
 
        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 
        proxy_pass http://csgx.com:7001/csgx/;
 
        if ($request_method = 'OPTIONS') {
            return 200;
        }
 
   }
 
   
}

2、Nginx解決Ajax非簡單請求跨域原理

監聽新埠10001，監聽轉發客戶端的應用系統：/csgx，同時監聽轉發服務端：/csgx2，這樣在客戶端的頁面訪問服務端的頁面就是：

http://127.0.0.1:10001/csgx2/jiHuaMap/test

原理就是將請求的IP地址和埠都進行了統一，都是：127.0.0.1:10001，這樣同域名（同IP）同埠就不會出現跨域，解決了Ajax非簡單請求的跨域問題。

三、Nginx配置檔案不生效，Nginx配置檔案重啟也不生效

見：

https://www.cnblogs.com/fanshuyao/p/15384682.html

四、後端跨域：springboot CORS 跨域請求解決三大方案

見：

https://www.cnblogs.com/fanshuyao/p/14030944.html

（時間寶貴，分享不易，捐贈回饋，^_^）

================================

©Copyright 蕃薯耀2021-10-09

https://www.cnblogs.com/fanshuyao/