摘要：一產(chǎn)生跨域的原因瀏覽器限制跨域請求二解決思路解決跨域有多重，在這里主要講用解決跨域代理瀏覽器禁止檢查跨域三下載安裝下載地址選擇其中一個版本下載，再解壓即可使用在目錄下輸入，若出現(xiàn)版本號，則安裝成功四反向代理解決跨域客戶端解決跨域我們使用的

1.瀏覽器限制

2.跨域

3.XHR（XMLHttpRequest）請求

解決跨域有多重，在這里主要講用nginx解決跨域

1.JSONP

2.nginx代理

3.瀏覽器禁止檢查跨域

nginx下載地址

選擇其中一個版本下載，再解壓即可使用

在nginx目錄下輸入nginx -v，若出現(xiàn)版本號，則安裝成功

1.我們使用jquery的ajax發(fā)送請求，node開啟后臺服務(wù)

前端代碼：
利用jQuery的ajax api發(fā)送請求

    發(fā)送請求OK(客戶端解決跨域問題)
    發(fā)送請求NO(客戶端解決跨域問題)
    

后端代碼：
利用node的express框架開啟服務(wù)，并根據(jù)url返回json格式的數(shù)據(jù),
設(shè)置這么多接口的目的是為了后面匹配nginx的location配置的

const express = require("express")
const cookieParser = require("cookie-parser")

var app = express()


var router = express.Router()
router.get("/ok",function (req,res) {
    res.json({
        code:200,
        msg:"isOK"
    })    
})

router.get("/ok/son",function (req,res) {
    res.json({
        code:200,
        msg:"isOKSon"
    })    
})

router.get("/ok2",function (req,res) {
    res.json({
        code:200,
        msg:"isOK2"
    })    
})

router.get("/no",function (req,res) {
    res.json({
        code:200,
        msg:"isNO"
    })    
})

router.get("/no/son",function (req,res) {
    res.json({
        code:200,
        msg:"isNOSON"
    })    
})

router.get("/no/son2",function (req,res) {
    res.json({
        code:200,
        msg:"isNOSON2"
    })    
})

app.use(router)
app.use(cookieParser)
app.listen(3000,function () {
    console.log("listen in 3000")
})

然后開啟node服務(wù)

現(xiàn)在可以測試下接口

可以看出，node服務(wù)成功開啟
現(xiàn)在可以嘗試不開啟nginx服務(wù)直接發(fā)送ajax請求會出現(xiàn)什么情況
（注意：發(fā)送ajax請求需要以服務(wù)器方式打開網(wǎng)頁，不能以文件形式）

如圖，在5500端口請求3000端口出現(xiàn)了跨域問題，這時候就可以開啟nginx服務(wù)并配置location進(jìn)行解決

2.配置nginx進(jìn)行反向代理解決跨域

反向代理的原理就是講前端的地址和后端的地址用nginx轉(zhuǎn)發(fā)到同一個地址下，如5500端口和3000端口都轉(zhuǎn)到3003端口下，具體配置如下：

打開nginx目錄下的conf目錄里面nginx.conf

為了方便以后測試，我們將配置分離開來，弄成多個文件

在nginx.conf的http對象的最后加上include ../vhost/test.conf;（注意要最后加上分號）

這樣就可以在test.conf下多帶帶配置了

具體的location配置規(guī)則如下：
nginx的location配置規(guī)則

server
{
   listen 3003;
   server_name localhost;
   ##  = /表示精確匹配路徑為/的url，真實訪問為http://localhost:5500
   location = / {
       proxy_pass http://localhost:5500;
   }
   ##  /no 表示以/no開頭的url，包括/no1,no/son，或者no/son/grandson
   ##  真實訪問為http://localhost:5500/no開頭的url
   ##  若 proxy_pass最后為/ 如http://localhost:3000/;匹配/no/son，則真實匹配為http://localhost:3000/son
   location /no {
       proxy_pass http://localhost:3000;
   }
   ##  /ok/表示精確匹配以ok開頭的url，/ok2是匹配不到的，/ok/son則可以
   location /ok/ {
       proxy_pass http://localhost:3000;
   }
}

上面代碼的意思是將localhost:3003轉(zhuǎn)發(fā)為location:5500,也就是說現(xiàn)在訪問localhost:3003實際上是訪問location:5500,而訪問localhost:3003/no則是訪問localhost:3000,并以no開頭的url

現(xiàn)在我們可以開啟nginx服務(wù)了，在nginx目錄下使用start nginx即可開啟服務(wù)

每次修改配置都需要執(zhí)行nginx -s reload命令才能生效

現(xiàn)在修改前端代碼，將之前請求的接口的端口換為3003，如下：

$("#getOK").click(function () {
                $.ajax({
                    url:"http://localhost:3003/ok",
                    success:function(res) {
                        console.log("success",res)
                    },
                    error:function(err) {
                        console.log("fail",err)
                    }
                })
            })

在瀏覽器訪問的也不算location:5500,而是localhost:3003了，再次發(fā)送請求也不會出現(xiàn)跨域問題了，因為他們都是同一個域了，這就是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 *;

        #   預(yù)檢命令的緩存，如果不緩存每次會發(fā)送兩次請求
        add_header Access-Control-Max-Age 3600;
        #   帶cookie請求需要加上這個字段，并設(shè)置為true
        add_header Access-Control-Allow-Credentials true;

        #   表示允許這個域跨域調(diào)用（客戶端發(fā)送請求的域名和端口） 
        #   $http_origin動態(tài)獲取請求客戶端請求的域   不用*的原因是帶cookie的請求不支持*號
        add_header Access-Control-Allow-Origin $http_origin;

        #   表示請求頭的字段 動態(tài)獲取
        add_header Access-Control-Allow-Headers 
        $http_access_control_request_headers;

        #   OPTIONS預(yù)檢命令，預(yù)檢命令通過時才發(fā)送請求
        #   檢查請求的類型是不是預(yù)檢命令
        if ($request_method = OPTIONS){
            return 200;
        }
    }
}

發(fā)送預(yù)檢命令的是非簡單請求，具體可以看慕課網(wǎng)ajax跨域完全講解
實際上不是非簡單請求的且不帶cookie只需2個字段即可解決跨域
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Allow-Origin $http_origin;

具體效果如下圖：

這時只需改ajax請求的端口接口，無需修改前端服務(wù)器的地址

最后附上源碼：
nginx解決跨域問題