參考頁面： https://blog.csdn.net/weixin_33796177/article/details/88590102
一.配置Nginx
廢話不多說,我們直接打開nginx.conf文件server {
listen 8888;
server_name 127.0.0.1;
location / {
if ($request_method ~* "(GET|POST)") {
add_header "Access-Control-Allow-Origin" *;
}
# Preflighted requests
if ($request_method = OPTIONS ) {
add_header "Access-Control-Allow-Origin" *;
add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
return 200;
}
proxy_pass http://127.0.0.1:5500;
proxy_redirect default;
}
location /api{
rewrite ^/api/(.*)$ /$1 break;
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 啟動的一個地址,你也闊以不用code開啟的代理，直接用nginx啟動一個開發端口，把上面的 location / 替換掉
location / {
#指向文件的目錄
root D:\qianlima\weijia\weijia;
#指定項目頁面名稱
index index.html index.htm;
}
http://ip.taobao.com/ 是我們要訪問的接口地址(淘寶檢測ip地址來源的接口)rewrite ^/apis/(.)$ /$1 break：代表重寫攔截進來的請求，並且只能對域名后邊以“/apis”開頭的起作用，例如www.a.com/apis/msg?x=1重寫。只對/apis重寫。rewrite后面的參數是一個簡單的正則 ^/apis/(.)$ ,$1代表正則中的第一個(),$2代表第二個()的值,以此類推,break代表匹配一個之后停止匹配。
前端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數據返回如下，說明跨域訪問成功
附帶完整實列代碼
來自國外一篇文章Nginx啟用CORS,配置的非常完整,需要FQ
location / {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
#
# Tell client that this pre-flight info is valid for 20 days
#
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,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
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,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
}
二.其它跨域解決方案
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解決跨域問題在實際開發過程中顯得更為重要
三.Nginx工具以及參考資料