在我們前端開發的程序中, 相信大家都遇到過一個讓人頭疼的問題,那就是跨域問題.
跨域解決的方式有很多,這里主要講的是如何來使用 nginx來解決我們所遇到的跨域問題
首先,在我們開始之前,首先要知道跨域是如何產生的:
協議
ip
埠號
這三者有任何一個不同,就會產生跨域問題
了解了跨域的產生,接著我們就來看看,如何解決它
一.下載nginx
下載地址: http://nginx.org/en/download.html
如圖所示, 選擇相應的版本,進行下載
下載完成后,選擇任意位置進行解壓,不需要安裝
解壓完成后,進入nginx的目錄,輸入命令 nginx -v 如果能夠出現版本,則說明成功,如圖:
二. nginx反向代理解決跨域問題
在這里,我們使用ajax來做請求,然后node+express來寫后臺
前端代碼如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button>點擊</button>
<script>
// 給button添加點擊事件
$('button').click(function(){
$.ajax({
url:'http://localhost:3000/user/find',
success:function(r){
console.log(r)
},
error:function(e){
console.log(e)
}
})
})
</script>
</body>
</html>后端代碼,如下所示:
使用前,需要安裝express npm install express
let express = require('express')
// 創建應用
let app = express()
// get請求
app.get('/user/find',(req,res)=>{
res.send('hello')
})
// 啟動服務,監聽埠
app.listen(3000,()=>{
console.log('啟動成功...')
})然后開啟node服務
這個時候,如果打開頁面訪問介面,會出現跨域報錯,如下圖所示:
注意,打開檔案的時候一定要在服務中打開,不要使用絕對路徑打開
接著就是配置nginx檔案,解決這個跨域問題
反向代理的意思就是把前端的地址和后端的地址 使用nginx轉換到相同的地址下,如把上面的node服務3000埠 和 網頁打開的服務5500埠都轉換到 nginx的8000埠下
具體配置如下:
打開nignx底下conf檔案夾,在conf檔案夾中有一個nginx.conf 檔案,更改配置如下
server {
listen 8000;
server_name localhost;
# / 表示匹配路徑為/的url
location / {
proxy_pass http://localhost:5500;
}
# /user 表示訪問以/user 開頭 的地址 如/username,/user/find等
location /user {
proxy_pass http://localhost:3000;
}
}注意, listen那里不要使用node服務的3000,之前我是想著直接監聽node的服務埠,應該是可以的,可是這樣會占用3000介面,導致node服務啟動不了
上面代碼的意思是,把訪問localhost:8000 轉換成訪問 localhost:5500,而訪問localhost:8000/user... 則轉換成localhost:3000/user
配置完成之后需要在終端中,使用 nginx -s reload 更新我們的配置
啟動nginx的命令是 start nginx
然后,把前端代碼的請求地址修改一下,此時前端訪問的就不再是node的服務了,而是要訪問nginx, 然后通過nginx做回應的轉發
// 給button添加點擊事件
$('button').click(function(){
$.ajax({
url:'http://localhost:8000/user/find',
success:function(r){
console.log(r)
},
error:function(e){
console.log(e)
}
})
})在瀏覽器中訪問的也不再是localhost:5500了,而是localhost:8000,原因,已經在上方解釋過了
這樣就不會出現跨域問題了,這就是反向代理
希望本篇文章,能夠對您有所幫助,歡迎批評指正!
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/242895.html
標籤：其他
上一篇：js之滑鼠的拖曳效果