nginx 解決ajax post跨域問題 以及出現該跨域的本質原因

背景：服務器語言為Java 框架Springboot  PostMapping   RequestBody 

　　　前端 js Ajax請求 content-type application/json 

　　　瀏覽器報跨域

原因：

原來在使用Ajax跨域請求時，如果設置Header的ContentType為application/json,會分兩次發送請求。第一次先發送Method為OPTIONS的請求到服務器，這個請求會詢問服務器支持哪些請求方法（GET,POST等），支持哪些請求頭等等服務器的支持情況。等到這個請求返回后，如果原來我們准備發送的請求符合服務器的規則，那么才會繼續發送第二個請求，否則會在Console中報錯。

為什么在跨域的時候設置ContentType為application/json時會請求兩次？其實JQuery的文檔對此有做說明。

contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8')

Type: Boolean or String

When sending data to the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases. If you explicitly pass in a content-type to $.ajax(), then it is always sent to the server (even if no data is sent). As of jQuery 1.6 you can pass false to tell jQuery to not set any content type header. Note: The W3C XMLHttpRequest specification dictates that the charset is always UTF-8; specifying another charset will not force the browser to change the encoding. Note: For cross-domain requests, setting the content type to anything other than application/x-www-form-urlencoded, multipart/form-data, or text/plain will trigger the browser to send a preflight OPTIONS request to the server.

注意Note后面的描述，在跨域的時候，除了contentType為application/x-www-form-urlencoded,multipart/form-data或者text/plain外，都會觸發瀏覽器先發送方法為OPTIONS的請求。

比如說，你原來的請求是方法方法POST，如果第一個請求返回的結果Header中的Allow屬性並沒有POST方法，那么第二個請求是不會發送的，此時瀏覽器控制台會報錯，告訴你POST方法並不被服務器支持。

 

之前的跨域配置 

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';

nginx解決方案 將下方代碼放置對應的location內 重點是OPTIONS處理：

if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
       }
       if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
       }
       if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
       }