nginx解決跨域問(wèn)題的實(shí)例方法

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

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

前后端分離，使用nginx解決跨域問(wèn)題

前端：vue.js+nodejs+webpack

后臺(tái)：SpringBoot

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

思想：將前端代碼打包，讓nginx指向靜態(tài)資源，nginx對(duì)后臺(tái)請(qǐng)求進(jìn)行轉(zhuǎn)發(fā)。

1、將前端代碼打包：

npm run build

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

/Users/xxx/ideaProjects/webtest/dist

2、打開(kāi)

/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時(shí) 重寫(xiě)的問(wèn)題

   if (!-e $request_filename) {

    rewrite ^(.*) /index.html last;

    break;

   }

  }

 

 

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

  location /api/ {

   proxy_pass http://localhost:8080/;# 代理接口地址

  }

測(cè)試

前端發(fā)送請(qǐng)求：http://localhost/test ，vue-router將其重定向?yàn)閔ttp://localhost/api/demo/1，實(shí)際訪問(wèn)是http://localhost:8080/demo/1。

直接向后臺(tái)發(fā)送請(qǐng)求：訪問(wèn)http://localhost/api/demo/1，實(shí)際訪問(wèn)是：http://localhost:8080/demo/1

內(nèi)容擴(kuò)展思考：

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

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

代理接口地址只到8080，那么他會(huì)自動(dòng)將后臺(tái)項(xiàng)目的名稱(chēng)加上？？？比如接口是http://148.70.110.87:8080/項(xiàng)目名稱(chēng)/方法名稱(chēng) 。。。

2).js 中是這樣請(qǐng)求的，nginx是按照您上面的配置，但是請(qǐng)求出錯(cuò)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).您的第三個(gè)步驟，測(cè)試，實(shí)在看不懂要是能有相關(guān)的代碼就好了

您可能感興趣的文章:

nginx
跨域

相關(guān)文章

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