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

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/