如何用Nginx解決跨域問題?一文了解

2022-09-15 15:00:27 字數 1841 閱讀 4874

一. 產生跨域的原因

1.瀏覽器限制

2.跨域

3.xhr(xmlhttprequest)請求

二. 解決思路

解決跨域有多重,在這裡主要講用nginx解決跨域

1.jsonp

2.nginx**

四. nginx反向**解決跨域(客戶端解決跨域)

1.我們使用jquery的ajax傳送請求,node開啟後台服務

前端**:

利用jquery的ajax api傳送請求

傳送請求ok(客戶端解決跨域問題)

傳送請求no(客戶端解決跨域問題)

後端**:

利用node的express框架開啟服務,並根據url返回json格式的資料,

設定這麼多介面的目的是為了後面匹配nginx的location配置的

然後開啟node服務

現在可以測試下介面

可以看出,node服務成功開啟

現在可以嘗試不開啟nginx服務直接傳送ajax請求會出現什麼情況

(注意:傳送ajax請求需要以伺服器方式開啟網頁,不能以檔案形式)

如圖,在5500埠請求3000埠出現了跨域問題,這時候就可以開啟nginx服務並配置location進行解決

2.配置nginx進行反向**解決跨域

開啟nginx目錄下的conf目錄裡面nginx.conf為了方便以後測試,我們將配置分離開來,弄成多個檔案在nginx.conf的http物件的最後加上include ../vhost/test.conf;(注意要最後加上分號)這樣就可以在test.conf下單獨配置了
具體的location配置規則如下:

server

location /no

location /ok/

}上面**的意思是將localhost:3003**為location:5500,也就是說現在訪問localhost:3003實際上是訪問location:5500,而訪問localhost:3003/no則是訪問localhost:3000,並以no開頭的url

現在我們可以開啟nginx服務了,在nginx目錄下使用start nginx即可開啟服務

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

現在修改前端**,將之前請求的介面的埠換為3003,如下:

$('#getok').click(function () ,

error:function(err)

})})

在瀏覽器訪問的也不算location:5500,而是localhost:3003了,再次傳送請求也不會出現跨域問題了,因為他們都是同乙個域了,這就是nginx反向**

五. 後端配置nginx解決跨域(服務端解決跨域)

依舊是ajax+node

這是前端**

$(document).ready(function () ,

success:function(res) ,

error:function(err)

})})

})後端**同前面

還有nginx配置如下:

server}}

傳送預檢命令的是非簡單請求,具體可以看慕課網ajax跨域完全講解

實際上不是非簡單請求的且不帶cookie只需2個字段即可解決跨域

具體效果如下圖:
這時只需改ajax請求的埠介面,無需修改前端伺服器的位址

如何用Nginx解決前端跨域問題

前言 在開發靜態頁面時,類似vue的應用,我們常會呼叫一些介面,這些介面極可能是跨域,然後瀏覽器就會報crosswww.cppcns.com origin問題不給調。最簡單的解決方法,就是把瀏覽器設為忽略安全問題,設定 disable web security。不過這種方式開發pc頁面到還好,如果是...

nginx解決跨域問題!

1 問題背景 前端呼叫線上後段時出現跨域問題!解決方法nginx的location頭部增加配置 add header access control allow headers add header access control allow methods get,post,options,head,...

nginx 解決跨域問題

跨域問題的存在 如果用ajax請求的資源網域名稱和原網頁的網域名稱不一致就會產生跨域請求問題,為了解決這一問題,可以在http響應裡面設定響應頭為允許跨域,但一般不會這麼做。使用nginx來解決跨域問題的手段是 因為nginx可以進行反向 因此可以進行網域名稱對映,讓不同服務的網域名稱對映為有相同的...