nginx解決跨域問題的實例方法

2022-10-12 13:38| 查看: 1582 |來源: 互聯網

前后端分離，使用nginx解決跨域問題前端：vue.js+nodejs+webpack 后臺：SpringBoot 反向代理服務器：nginx 思想：將前端代碼打包，讓nginx指向靜態資源，nginx對后臺請求進行轉發。 1、將前端代碼打包：npm ru

前后端分離，使用nginx解決跨域問題

前端：vue.js+nodejs+webpack

后臺：SpringBoot

反向代理服務器：nginx

思想：將前端代碼打包，讓nginx指向靜態資源，nginx對后臺請求進行轉發。

1、將前端代碼打包：

npm run build

會生成一個dist文件夾。包含一個index.html文件和一個static文件夾，路徑以我本地為例：

/Users/xxx/ideaProjects/webtest/dist

2、打開

/usr/local/etc/nginx目錄下的nginx.conf，在server中添加如下：

listen 80; #原為8080，避免沖突，更改為80 server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root /Users/xxx/ideaProjects/webtest/dist; index index.html; # 此處用于處理 Vue、Angular、React 使用H5 的 History時重寫的問題 if (!-e $request_filename) { rewrite ^(.*) /index.html last; break; } } # 代理服務端接口 location /api/ { proxy_pass http://localhost:8080/;# 代理接口地址 }

測試

前端發送請求：http://localhost/test ，vue-router將其重定向為http://localhost/api/demo/1，實際訪問是http://localhost:8080/demo/1。

直接向后臺發送請求：訪問http://localhost/api/demo/1，實際訪問是：http://localhost:8080/demo/1

內容擴展思考：

1).
# 代理服務端接口

location /api/ { proxy_pass http://localhost:8080/;# 代理接口地址 }

代理接口地址只到8080，那么他會自動將后臺項目的名稱加上？？？比如接口是http://148.70.110.87:8080/項目名稱/方法名稱。。。

2).js 中是這樣請求的，nginx是按照您上面的配置，但是請求出錯http://148.70.110.87/api/index2 404 (Not Found)

axios.post('/api/index2') .then( (response) =>{ console.log(response); }) .catch( (error)=> { console.log(error); });

3).您的第三個步驟，測試，實在看不懂要是能有相關的代碼就好了

以上nginx解決跨域問題的實例方法就是小編為大家收集整理的全部內容了，希望對大家有所幫助。如果您喜歡這篇文章，可以收藏或分享給您的小伙伴們吧！歡迎持續關注我們的后續更新。

本文最后更新于 2022-10-12 13:38，某些文章具有時效性，若有錯誤或已失效，請在網站留言或聯系站長：[email protected]

·END·

站長網微信號：w17tui，關注站長、創業、關注互聯網人 - 互聯網創業者營銷服務中心

免責聲明：本站部分文章和圖片均來自用戶投稿和網絡收集，旨在傳播知識，文章和圖片版權歸原作者及原出處所有，僅供學習與參考，請勿用于商業用途，如果損害了您的權利，請聯系我們及時修正或刪除。謝謝！

下一篇：在Linux中查看及終止正在運行的后臺程序方法上一篇：linux系統報tcp_mark_head_lost錯誤的處理方法

17站長網微信二維碼

始終以前瞻性的眼光聚焦站長、創業、互聯網等領域，為您提供最新最全的互聯網資訊，幫助站長轉型升級，為互聯網創業者提供更加優質的創業信息和品牌營銷服務，與站長一起進步！讓互聯網創業者不再孤獨！

掃一掃，關注站長網微信

青草久久影院-青草久久伊人-青草久久久-青草久久精品亚洲综合专区-SM双性精跪趴灌憋尿调教H-SM脚奴调教丨踩踏贱奴

nginx解決跨域問題的實例方法

大家都在看

相關分類

熱門排行

最近更新