nginx解決跨域問題的實例方法
前后端分離，使用nginx解決跨域問題
前端：vue.js+nodejs+webpack
后臺：SpringBoot
反向代理服務器：nginx
思想：將前端代碼打包，讓nginx指向靜態(tài)資源，nginx對后臺請求進行轉(zhuǎn)發(fā)。
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/;# 代理接口地址
}
測試
前端發(fā)送請求：http://localhost/test ，vue-router將其重定向為http://localhost/api/demo/1，實際訪問是http://localhost:8080/demo/1。
直接向后臺發(fā)送請求：訪問http://localhost/api/demo/1，實際訪問是：http://localhost:8080/demo/1
內(nèi)容擴展思考：
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).您的第三個步驟，測試，實在看不懂要是能有相關(guān)的代碼就好了
相關(guān)文章
Windows Server 2016 MySQL數(shù)據(jù)庫安裝配置詳細安裝教程
這篇文章主要介紹了Windows Server 2016 MySQL數(shù)據(jù)庫安裝配置詳細安裝教程,需要的朋友可以參考下2017-08-08
這篇文章主要介紹了nginx的80端口無法被遠程服務器訪問的問題解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-07-07
本篇文章主要介紹了使用 Nginx 部署靜態(tài)頁面的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
Nginx是一款高性能的開源HTTP和反向代理服務器,以其高并發(fā)處理能力和低資源消耗而聞名,它支持多種功能,Nginx的配置文件基于文本,易于理解和修改,使其成為 Web 開發(fā)和運維人員的首選工具之一,本文給大家介紹了Nginx在Linux中的配置及維護全教程2025-02-02
nginx禁止直接通過ip進行訪問并跳轉(zhuǎn)到自定義500頁面的操作
這篇文章主要介紹了nginx禁止直接通過ip進行訪問并跳轉(zhuǎn)到自定義500頁面的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-05-05
Nginx代理到https地址忽略證書驗證配置的實現(xiàn)
在特定情況下,Nginx代理到HTTPS地址可能需要忽略證書驗證,本文就來介紹一下如何實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-09-09
這篇文章主要介紹了如何本地安裝nginx及部署項目問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
Nginx配置proxy protocol代理獲取真實ip的全過程
在現(xiàn)代開發(fā)中有很多場景需要拿到用戶的真實ip,比如安全策略,和地區(qū)熱點信息推送等功能,但是現(xiàn)在代理很多,用戶可能會通過代理訪問服務,或者黑客攻擊的時候也會使用很多肉機隱藏其真實ip,所以本文給大家介紹了Nginx配置proxy protocol代理獲取真實ip的全過程2025-09-09
大家好，本篇文章主要講的是Nginx配置SSL和WSS步驟介紹，感興趣的同學趕快來看一看吧，對你有幫助的話記得收藏一下，方便下次瀏覽2021-12-12
這篇文章主要介紹了Nginx與Lua灰度發(fā)布的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03