" />

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2022年06月24日 09:18:39   作者：小熊快跑  
本文主要介紹了Vue-Cli配置代理轉(zhuǎn)發(fā)解決跨域問題的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

思路：

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

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

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

vue-cli解決跨域配置說明

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

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

基地址

.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
  })
}

重啟項目，驗(yàn)證結(jié)果

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

小結(jié)

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

特別強(qiáng)調(diào)：

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

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

相關(guān)文章

最新評論