nginx解決跨域和spring解決跨域

nginx版本是1.15.12配置跨域問題

server
{
     listen 3002;
     server_name localhost;
     location /ok {
       // 這行跟跨域無關
         proxy_pass http://localhost:3000;
         # 指定允許跨域的方法，*代表所有
         add_header Access-Control-Allow-Methods *;
         # 預檢命令的緩存，如果不緩存每次會發送兩次請求
         add_header Access-Control-Max-Age 3600;
         # 帶cookie請求需要加上這個字段，並設置爲true
         add_header Access-Control-Allow-Credentials true;
         # 表示允許這個域跨域調用（客戶端發送請求的域名和端口） 
         # $http_origin動態獲取請求客戶端請求的域 不用*的原因是帶cookie的請求不支持*號
         add_header Access-Control-Allow-Origin $http_origin;
         # 表示請求頭的字段 動態獲取
         add_header Access-Control-Allow-Headers 
         $http_access_control_request_headers;
         # OPTIONS預檢命令，預檢命令通過時才發送請求
         # 檢查請求的類型是不是預檢命令
         if ($request_method = OPTIONS){
           return 200;
         }
     }
}

這樣配置nginx匹配到ok路徑url的就可以解決跨域問題了。也可以把跨域的參數配置到nginx的http模塊裏面針對nginx的所有請求或者配置到nginx的server模塊裏面針對某個項目下面。配置到哪個作用域看項目具體需求而定。

注意：有些人配置nginx的跨域問題會少配置以下代碼的。如果缺少這兩行代碼將導致非簡單請求無法解決跨域問題。而簡單請求卻可以解決跨域問題，這樣容易造成跟前端扯皮，後端說配置了跨域問題，前端卻說有跨域問題出現

 if ($request_method = OPTIONS){
     return 200;
 }

瀏覽器將CORS請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。

只要同時滿足以下兩大條件，就屬於簡單請求。

（1) 請求方法是以下三種方法之一：
HEAD
GET
POST
（2）HTTP的頭信息不超出以下幾種字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain
凡是不同時滿足上面兩個條件，就屬於非簡單請求。瀏覽器對這兩種請求的處理，是不一樣的。 跨域的詳情講解請看這篇文章: http://www.ruanyifeng.com/blog/2016/04/cors.html

在項目中解決跨域問題建議在spring代碼中解決比較好。在 nginx中配置跨域問題語義不清，遷移項目nginx的配置還得配置上。

springboot的2.1.8.RELEASE版本配置跨域方式

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    /**
     * 配置跨域請求處理
     * */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowCredentials(true)
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
            .maxAge(3600);
    }
}

通過spring配置跨域問題只需要簡單的幾行代碼就可以解決了。這樣配置簡單請求和非簡單請求可以適用