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

更新時間：2019年07月15日 08:39:58 投稿：laozhang

在本篇文章里小編給各位分享了關(guān)于nginx怎么解決跨域問題的方法和實例代碼，需要的朋友們參考下。

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

前端：vue.js+nodejs+webpack

后臺：SpringBoot

反向代理服務(wù)器：nginx

思想：將前端代碼打包，讓nginx指向靜態(tài)資源，nginx對后臺請求進(jìn)行轉(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;

   }

  }

 

 

  # 代理服務(wù)端接口

  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)容擴(kuò)展思考：

1).
# 代理服務(wù)端接口

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)的代碼就好了

您可能感興趣的文章:

nginx
跨域

相關(guān)文章

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