跨域是指a頁面想獲取b頁面資源，如果a、b頁面的協議、域名、端口、子域名不同，或是a頁面爲ip地址，b頁面爲域名地址，所進行的訪問行動都是跨域的，而瀏覽器爲了安全問題一般都限制了跨域訪問，也就是不允許跨域請求資源
Nginx作爲反向代理服務器，就是把http請求轉發到另一個或者一些服務器上。通過把本地一個url前綴映射到要跨域訪問的web服務器上，就可以實現跨域訪問。對於瀏覽器來說，訪問的就是同源服務器上的一個url。而nginx通過檢測url前綴，把http請求轉發到後面真實的物理服務器
一.配置Nginx
廢話不多說,我們直接打開nginx.conf文件
server {
listen 8888;
server_name 127.0.0.1;
location / {
proxy_pass http://127.0.0.1:5500;
}
location /api{
proxy_pass http://ip.taobao.com/;
}
}配置解釋：
我們在瀏覽器中輸入 127.0.0.1:8888 自動會轉發到 http://127.0.0.1:5500
http://127.0.0.1:5500 是本地所指向的地址，類似於vue開的的代理npm run dev 啓動的一個地址
http://ip.taobao.com/ 是我們要訪問的接口地址(淘寶檢測ip地址來源的接口)
前端ajax的url地址 這樣寫 http://127.0.0.1:8888/api/service/getIpInfo.php?ip=117.89.35.51，訪問的url中有api nginx會自動換到所對應的location
前端實列代碼:
//新建一個html文件把以下代碼放入script標籤中
$.ajax({
//請求淘寶檢測ip地址來源的接口
url:'http://127.0.0.1:8888/api/service/getIpInfo.php?ip=117.89.35.51',
type:'get',
success:function(res){
console.log(res)
},
error:function(err){
console.log(err)
}
})啓動服務:
我是通過vsCode的Go live插件啓動了一個127.0.0.1:5500的服務，有很多同學是通過node開啓的代理，都一樣,
然後我們在瀏覽器中輸入127.0.0.1:8888上面nginx所配置
打開瀏覽器network數據返回如下，說明跨域訪問成功
二.其它跨域解決方案
1.jsonp 需要目標服務器配合一個callback函數。
2.window.name+iframe 需要目標服務器響應window.name。
3.html5的 postMessage+ifrme 這個也是需要目標服務器或者說是目標頁面寫一個postMessage，主要側重於前端通訊。
4.node.js開啓本地代理,類似於vue-cli中的devServer模式,闊以方便開啓代理
5.CORS 需要服務器設置header ：Access-Control-Allow-Origin。
6.Nginx反向代理，可以不用目標服務器配合，需要Nginx服務器，用於請求轉發。
我個人認爲4 、5 、6解決跨域問題在實際開發過程中顯得更爲重要