談談vue開發中nginx跨域,多站點部署的用法

        不知道你們在開發過程當中, 有沒有遇到常常切換後端接口地址?或者要部署上線,剛配置打包好前端包,運維又要修改服務器地址,咱們不得不修改服務器地址再次打包...,有小夥伴使用暴露在public下的靜態js文件來配置後端IP地址和端口的方法,但我測試發現, js存在異步,有時候會出現js未加載到,http請求就已經發出去的狀況,我分享的這個方法, 能夠一勞永逸的解決多站點部署問題,並且幾乎能夠解決任何狀況下的跨域.

        首先什麼是跨域？你們能夠查看浪裏行舟大佬的分享 九種跨域方式實現原理(完整版)，感謝大佬分享，這裏咱們主要討論使用nginx 反向代理解決跨域以及多站點部署的方法。nginx的安裝和配置你們能夠參考菜鳥教程文章,咱們來看項目中該如何使用.

vue項目中, 咱們建立Axios實例來發送http請求,並設置axios 初始化參數:

import axios from 'axios';const instance = axios.create({    // 根據實際狀況配置線上和線下攔截,注意不填寫後端接口的域名和端口號    baseURL: process.env.NODE_ENV === 'production' ? 'api/' : 'api/',    timeout: 5000 // 請求超時時間});複製代碼

注意這裏的baseURL不設置後端接口的域名和端口號,這樣咱們的請求,就會在前端項目啓動的服務中發出,開發時咱們的請求地址即爲 localhost:8080/api/xxx

爲何後端接口並不在localhost:8080, 請求卻成功了呢?答案就是咱們在vue中使用了webpack的代理方式:

這裏配置攔截咱們在axios裏設置的baseURL = 'api/', pathRewrite的做用是將咱們的地址重寫到真實的後端地址, 若是後端地址中並無 '/api'這一層, 咱們只須要修改成 

devServer: {    proxy: {      '/api': {           // target: 'http://192.168.1.2:8000',//本地調試或者其餘局域網內電腦的地址           target: 'https://jhdesign.jingzhidh.com',// 服務器地址           ws: true,           changeOrigin: true,           pathRewrite: {               '^/api': '' // 設置爲空表示後端服務接口中並無/api           }        }    }}複製代碼

當咱們的後端地址修改,咱們只須要在proxy裏切換服務器地址,重啓服務便可(想一想我同時對接三個Java後臺直連他們的電腦時,這裏切換真的很頻繁😂)

以上即爲開發環境下的配置, 等到上線是否是還要修改不少?答案是no, 將前端打包後, 前端靜態資源放入Tomcat 或者nginx 任何靜態服務器下便可, 不須要作任何修改, 由於打包後的代碼裏,沒有寫任何關於後端的地址或者端口, 前端在服務器運行起來之後,前端請求就在服務器地址下發出, 好比咱們的服務器地址是 192.168.1.10:80, 那麼咱們剛剛的登陸請求就在http://192.168.1.10/api/login, 接下來咱們要作的, 就是配置nginx, 請看下圖:

前端項目打包後放在 /opt/www/ 目錄下, 前端服務即nginx服務在服務器的80端口啓動, 後端服務器地址在 8000端口, 這樣咱們就能將服務正確的轉發到後臺, 若是哪天服務器抽風更換服務器, 只須要運維修改這裏的配置便可, 而前端項目, 不須要任何的修改, 固然也不須要打包, 也就是說, 後面的修改服務器這些, 跟前端沒有任何關係,徹底解除耦合,咱們就能夠愉快的繼續咱們的開發,不被運維大哥打擾,固然,若是大家運維是妹子, 請忽略我以上分享.

第一次寫文章, 有些囉嗦,請見諒, 小弟才疏學淺, 若有不對的地方歡迎指出, 必定虛心受教.謝謝.