Vue-Cli配置代理轉發(fā)解決跨域問題的方法

更新時間：2022年06月24日 09:18:39 作者：小熊快跑

本文主要介紹了Vue-Cli配置代理轉發(fā)解決跨域問題的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

vue-cli中集成的跨域解決方案

思路：

在前端服務和后端接口服務之間架設一個中間代理服務，它的地址保持和前端服務一致，那么：

代理服務和前端服務之間由于協(xié)議域名端口三者統(tǒng)一不存在跨域問題，可以直接發(fā)送請求
代理服務和后端服務之間由于并不經(jīng)過瀏覽器沒有同源策略的限制，可以直接發(fā)送請求

這樣，我們就可以通過中間這臺服務器做接口轉發(fā)，在開發(fā)環(huán)境下解決跨域問題，看起來好像挺復雜，其實vue-cli已經(jīng)為我們內置了該技術，我們只需要按照要求配置一下即可。

vue-cli解決跨域配置說明

在vue.config.js配置文件中，有一項是devServer，它就是我們下邊要操作的主角。

module.exports = {
  devServer: {
    // ... 省略
    // 代理配置
    proxy: {
        // 如果請求地址以/api打頭,就出觸發(fā)代理機制
        // http://localhost:9588/api/login -> http://localhost:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // 我們要代理的真實接口地址
        }
      }
    }
  }
}

基地址

.env.development

# VUE_APP_BASE_API = 'http://localhost:3000/api'  (這句不要了)
VUE_APP_BASE_API = '/api'

api/user.js

export function login(formData) {
  return request({
//  url: 'api/sys/login',
+   url: '/sys/login', // 前面的api就省略了
    method: 'POST',
    data: formData
  })
}

重啟項目，驗證結果

修改了配置文件，一定要重啟前端項目
再次測試登陸接口，我們發(fā)現(xiàn)：跨域問題已經(jīng)解決了

小結

vue-cli集成了跨域代理功能------ 只能用在開發(fā)階段。
vue.config.js文件中，在devServe下按指定格式配置了proxy，再重啟項目即可。

特別強調：

ajax的基地址baseUrl必須是相對地址，而不能是絕對地址

到此這篇關于Vue-Cli配置代理轉發(fā)解決跨域問題的方法的文章就介紹到這了,更多相關Vue-Cli 代理轉發(fā)跨域內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue element實現(xiàn)多個Formt表單同時驗證
這篇文章主要介紹了vue element實現(xiàn)多個Formt表單同時驗證方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
解決Vue的文本編輯器 vue-quill-editor 小圖標樣式排布錯亂問題
這篇文章主要介紹了解決Vue的文本編輯器 vue-quill-editor 小圖標樣式排布錯亂問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
Vue3?中的??shallowReactive?詳解
本文深入探討了Vue3中新特性shallowReactive的使用和原理,shallowReactive是創(chuàng)建淺響應式對象的API,只對對象的第一層屬性進行響應式轉換,不對嵌套對象處理,有助于性能優(yōu)化和狀態(tài)管理,同時也指出了shallowReactive在使用中的注意事項
2024-10-10
教你用vue實現(xiàn)一個有趣的圍繞圓弧動畫效果
最近做的兩個項目都是關于vue的,做完整理一下,這篇文章主要給大家介紹了關于如何用vue實現(xiàn)一個有趣的圍繞圓弧動畫效果的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-04-04
el-table?樹形數(shù)據(jù)?tree-props?多層級使用避坑
本文主要介紹了el-table?樹形數(shù)據(jù)?tree-props?多層級使用避坑,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2023-08-08
手動實現(xiàn)vue2.0的雙向數(shù)據(jù)綁定原理詳解
這篇文章主要給大家介紹了關于手動實現(xiàn)vue2.0的雙向數(shù)據(jù)綁定原理的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-02-02
Vue+mui實現(xiàn)圖片的本地緩存示例代碼
這篇文章主要介紹了Vue+mui實現(xiàn)圖片的本地緩存的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-05-05
Vue實現(xiàn)簡單搜索功能的示例代碼
在vue項目中，搜索功能是我們經(jīng)常需要使用的一個場景，最常用的是在列表數(shù)據(jù)中搜索一個想要的，今天的例子就是我們實現(xiàn)vue從列表數(shù)據(jù)中搜索，希望對大家有所幫助
2023-03-03
vue+elementUI的select下拉框回顯為數(shù)字問題
這篇文章主要介紹了vue+elementUI的select下拉框回顯為數(shù)字問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue3不同語法格式對比的實例代碼
vue3發(fā)布已有一段時間了,文檔也大概看了一下,不過對于學一門技術,最好的方法還是實戰(zhàn),這篇文章主要給大家介紹了關于vue3不同語法格式對比的相關資料,需要的朋友可以參考下
2021-08-08