<p id="rrtt5"></p><ruby id="rrtt5"></ruby>

      系統城裝機大師 - 固鎮縣祥瑞電腦科技銷售部宣傳站!

      當前位置:首頁 > server > anz > 詳細頁面

      Nginx解決vue項目服務器部署及跨域訪問后端詳解

      時間:2022-11-16來源:www.1999hs.com作者:電腦系統城

      跨域問題在前后端分離項目很常見,至于為什么會跨域,同源策略,百度各種博客都很詳細,這里不再介紹,這篇文章主要給大家介紹了關于Nginx解決vue項目服務器部署及跨域訪問后端的相關資料,需要的朋友可以參考下
      目錄
      • 準備
      • 1、前端代碼注意事項:
      • 2、虛擬機的Nginx配置關鍵點:
      • 測試
      • 總結 

      準備

      (1)首先是一個Vue項目。

      (2)其次準備好服務器(在這里我是用虛擬機VMware)。

      (3)準備好一個SpringBoot后端代碼。

      (4)服務器上必須安裝Nginx。

      1、前端代碼注意事項:

      (1)在這里我是用vuecli3腳手架創建的vue項目的,所以項目創建完畢之后是沒有vue.config.js的。

      其實這個文件的創建是為了本地測試解決前后端跨域問題的,但是在打包項目的時候需要把這里關于跨域的代碼需要注釋。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      // vue.config.js
       
      module.exports = {
          publicPath: './',
          runtimeCompiler: true,
          // devServer:{
          //     port:83,
          //     proxy:{
          //         '/api':{
          //             target:"http://localhost:8086",
          //             changOrigin: true,  //允許跨域
          //             pathRewrite:{
          //                 '^/api':''  //重寫路徑
          //             }
          //         }
          //     }
          // }
      }

      (2)第二點前端配置的請求路徑需要加一個前綴,用于nginx的路由轉發:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      import axios from "axios";
      const request = axios.create({
          // baseURL: 'http://localhost:8086',  //  注意!!  這里是全局統一加上了  '/api'  前綴,也就是說所有的接口都會加上'/api'前綴名
          // timeout: 5000
          //利用nignx解決跨域問題
          baseURL: '/api'//  注意!!  這里是全局統一加上了  '/api'  前綴,也就是說所有的接口都會加上'/api'前綴名
          timeout: 5000
      })
      export default request;

      (3)第三點需要改一下路徑地址,配置路由和組件之間的關系,配置成Hash路由模式。

      (4)基本上到這里然后控制臺npm run build 一下就可以了??!

      (5)將dist文件夾的文件上傳到Nginx中。

      2、虛擬機的Nginx配置關鍵點:

      重要的一點,全程都要以root賬戶進行操作,輸入su root ,然后輸入密碼即可進行root權限。

      (1)Nginx結構目錄:

      (2)在這里我們要把前端打包好的代碼dist下面的文件通過第三方軟件上傳到了index中了。

      (3)這時候開始配置cong中的nginx.conf文件,vim nginx.conf。

      (4)修改配置文件:具體如圖所示,在這里注意proxy_pass http://之后的地址加你自己電腦的IP地址加上相應的后端的端口號。

      舉個例子:假設這里我本機的IP地址為192.168.12.1,SpringBoot的端口號為8081,那么請求地址為proxy_pass http://192.168.12.1:8081/;

       

      如何查看本機的Ip地址呢?找到window10左下角輸入cmd,然后輸入ipconfig,就可以查看了。

      (5)還有很重要的一點,要關閉Linux的防火墻,我這里是centos7.6,所以在命令行要輸入systemctl stop firewalld.service。

      到這里的話,把后端的項目跑起來,虛擬機上的Nginx運行起來,項目就可以正常訪問了?。?!

      測試

      (1)訪問服務器中的前端文件

      (2)前端文件請求,然后通過Nginx轉發到后端。

      (3)后端接受請求,給予前端反饋。

      總結 

      到此這篇關于Nginx解決vue項目服務器部署及跨域訪問后端的文章就介紹到這了

      分享到:

      相關信息

      • 服務器系統怎么安裝

        我們在使用操作系統的時候,有的小伙伴們想要為自己的電腦安裝服務器操作系統,但是不知道具體應該怎么做。那么對于這個問題小編覺得我們可以先在電腦上安裝一個虛擬機,然后去相關網站下載自己需要的服務器操作系統,然后在...

        2022-11-13

      • Windows Install Clean Up使用方法

        很多小伙伴都需要對自己的電腦進行清理,這個時候就會需要用到清理工具,很多用戶都不知道Windows Install Clean Up怎么使用,今天就給你們帶來了Windows Install Clean Up使用方法,如果你也需要就來學習下吧。...

        2022-11-10

      系統教程欄目

      欄目熱門教程

      人氣教程排行

      站長推薦

      熱門系統下載

      天堂资源中文WWW,久久精品女人天堂AV免费观看,无码专区一ⅤA亚洲V天堂,免费观看在线AⅤ天堂视频