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

1.瀏覽器限制

2.跨域

3.XHR（XMLHttpRequest）請(qǐng)求

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

1.JSONP

2.nginx代理

3.瀏覽器禁止檢查跨域

nginx下載地址

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

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

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

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

    發(fā)送請(qǐng)求OK(客戶端解決跨域問題)
    發(fā)送請(qǐng)求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)在可以測(cè)試下接口

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

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

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

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

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

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

在nginx.conf的http對(duì)象的最后加上include ../vhost/test.conf;（注意要最后加上分號(hào)）

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

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

server
{
   listen 3003;
   server_name localhost;
   ##  = /表示精確匹配路徑為/的url，真實(shí)訪問為http://localhost:5500
   location = / {
       proxy_pass http://localhost:5500;
   }
   ##  /no 表示以/no開頭的url，包括/no1,no/son，或者no/son/grandson
   ##  真實(shí)訪問為http://localhost:5500/no開頭的url
   ##  若 proxy_pass最后為/ 如http://localhost:3000/;匹配/no/son，則真實(shí)匹配為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實(shí)際上是訪問location:5500,而訪問localhost:3003/no則是訪問localhost:3000,并以no開頭的url

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

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

現(xiàn)在修改前端代碼，將之前請(qǐng)求的接口的端口換為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ā)送請(qǐng)求也不會(huì)出現(xiàn)跨域問題了，因?yàn)樗麄兌际峭粋€(gè)域了，這就是nginx反向代理

1. 依舊是ajax＋node

這是前端代碼

$(document).ready(function () {
            $("#get").click(function () {
                $.ajax({
                    url:"http://localhost:3002/ok",
                    //  帶cookies的請(qǐng)求
                    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ù)檢命令的緩存，如果不緩存每次會(huì)發(fā)送兩次請(qǐng)求
        add_header Access-Control-Max-Age 3600;
        #   帶cookie請(qǐng)求需要加上這個(gè)字段，并設(shè)置為true
        add_header Access-Control-Allow-Credentials true;

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

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

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

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

具體效果如下圖：

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

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