日常筆記 vue專案 前後端分離專案跨域問題解決

2021-10-25 07:39:14 字數 1253 閱讀 8424

開發環境

生產環境

後台主導

cors

cors

前端主導

proxy**

nginx**

module.exports =

}

配置完proxy之後,我們請求介面的位址需要是當前前端服務的位址

既然要請求自己的位址,那麼就沒有必要寫localhost:8080 直接寫/即可

如果使用**,那麼就沒有必要使用.env中去進行我們對應的介面位址的配置。因為不管在什麼環境下,都是請求當前前端伺服器位址

如果使用cors 則需要在build時根據.env去請求不同環境的伺服器位址, 如果使用**,則不需要配置不同位址,全部都使用/api/***的形式

前端需要在axios的配置中配置baseurl。前提需要先配置好.env環境變數檔案

新建開發環境的env檔案

新建生產環境的env檔案

const _axios = axios.

create

()

如果使用**,則前端不需要再配置baseurl,因為請求全部走的前端服務(**)

vue.config.js

如果只有乙個後台

module.exports =

}

如果有多個後台介面
module.exports =},

"/自定義前端請求時字首":}

}}}

注意,在請求時,不需要配置axios的baseurl,也不需要新增任何的網域名稱

build之後,我們不再有nodejs伺服器,只是靜態頁面(proxy設定只能針對開發環境)

生產環境需要配置nginx

server 

# 配置**

location /伺服器字首

# 配置** 需要進行rewrite

location /前端請求的字首

error_page 500 502 503 504 /50x.html;

location = /50x.html

}

前後端分離專案

由於目前公司需要為已經存在的專案統一單點登入,而技術選型後採用的是apereo的cas。但是由於官方cas文件的混亂性 你懂得!並且其官方的例項和網上的例項教程都是基於傳統的專案 也就是非前後端分離專案 因此對於前後端分離的專案整合cas的可參考的資料就比較少,於是就有了下面的前後端分離專案基於ca...

用vue前後端分離專案開發記錄

一 軟體安裝 1.1 檢測node 是否安裝 1.2 安裝 映象 cnpm 1.3 安裝vue cli 1.4 檢查是否安裝vue cli腳手架成功 1.5安裝webpack 模組管理工具 二 建立vue專案 2.1 建立乙個基於webpack專案 2.2 進入專案檔案 2.3以生產環境啟動專案 2...

前後端不分離專案

express 是nodejs核心框架。express的功能介紹?express generator自動構建開發工具 express有乙個本地埠localhost 3000靜態網頁 聯合前端網頁的源 通過ejs模組可以實現前後端聯合專案 ejs可以識別html標籤,還能解析js,執行在express...