五. 後端配置nginx解決跨域（服務端解決跨域）

1. 依舊是ajax＋node

這是前端程式碼

$(document).ready(function () {
            $('#get').click(function () {
                $.ajax({
                    url:'http://localhost:3002/ok',
                    //  帶cookies的請求
                    xhrFields:{
                        withCredentials:true
                    },
                    success:function(res) {
                        console.log("success",res)
                    },
                    error:function(err) {
                        console.log('fail',err)
                    }
                })
            })
        })
 

後端程式碼同前面
還有nginx配置如下：

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;
        }
    }
}
 

傳送預檢命令的是非簡單請求，具體可以看慕課網ajax跨域完全講解
實際上不是非簡單請求的且不帶cookie只需2個欄位即可解決跨域
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Allow-Origin $http_origin;

• 具體效果如下圖：

這時只需改ajax請求的埠介面，無需修改前端伺服器的地址