vue中如何配置proxy代理
vue配置proxy代理
如果你的前端應(yīng)用和后端 API 服務(wù)器沒有運(yùn)行在同一個(gè)主機(jī)上(即解決跨域問題,用proxy代理請(qǐng)求一下),你需要在開發(fā)環(huán)境下將 API 請(qǐng)求代理到 API 服務(wù)器。
這個(gè)問題可以通過 vue.config.js
中的 devServer.proxy
選項(xiàng)來配置。
將
轉(zhuǎn)發(fā)到
https://apimusic.linweiqin.com
app.vue文件
<template> <div id="app"> <h1>hello Vue cli</h1> <HelloWorld></HelloWorld> </div> </template><script> /* @ => src */ // import HelloWorld from "./components/HelloWorld.vue"; import HelloWorld from "@/components/HelloWorld.vue"; /* 1. 引入 axios 請(qǐng)求庫(kù) */ import axios from "axios"; /* 組件的配置項(xiàng) */ export default { created() { // axios // .get("song/url?id=504835560") // .then((res) => { // console.log(res); // }); axios .get("/song/url?id=504835560") .then((res) => { console.log(res); }); axios.get("/api/s/getHotProducts").then(res=>{ console.log(res); }) }, name: "App", components: { HelloWorld }, }; </script><style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
在 vue.config.js 文件中添加如下所示的配置項(xiàng)
module.exports = { lintOnSave: false, devServer: { proxy: "https://apimusic.linweiqin.com/" } };
如果請(qǐng)求有多個(gè)不同的地址
A: http://s.linweiqin.com/api/s/getHotProducts
B: https://apimusic.linweiqin.com/song/url?id=504835560
module.exports = { lintOnSave: false, // devServer: { // proxy: "https://apimusic.linweiqin.com/" // } devServer: { proxy: { "/song": { target: "https://apimusic.linweiqin.com/", // changeOrigin: true, }, "/api": { target: "http://s.linweiqin.com/", }, }, }, };
proxy常用參數(shù)說明
module.exports = { publicPath: "/", devServer: { proxy: { "/api": { // 代理名稱 凡是使用/api開頭的地址都是用此代理 target: "http://1.2.3.4:5000/", // 需要代理訪問的api地址 changeOrigin: true, // 允許跨域請(qǐng)求 pathRewrite: { // 重寫路徑,替換請(qǐng)求地址中的指定路徑 "^/api": "/", // 將請(qǐng)求地址中的/api替換為空,也就是請(qǐng)求地址中不會(huì)包含/api/ }, }, }, }, };
關(guān)于/api的詳解
‘/api’:是指遇到這個(gè)字符開頭的話,在這個(gè)字符前面加上target里面的ip或者域名。
舉例:
①登錄接口:http://1.2.3.4:5000/login
…中間省略了配置過程…
②npm run serve:Local: http://localhost:8080/
③點(diǎn)擊后發(fā)送的登錄請(qǐng)求:http://localhost:8080/api/login
④/api 的作用就是將/api
前的localhost:8080變成target的內(nèi)容http://1.2.3.4:5000/
⑤完整的路徑變成了http://1.2.3.4:5000/api/login
⑥實(shí)際接口當(dāng)中沒有這個(gè)api,所以pathwrite
重寫就解決這個(gè)問題的。
⑦pathwrite
識(shí)別到api開頭就會(huì)把/api重寫成空,那就是不存在這個(gè)/apil了,完整的路徑又變成:http://1.2.3.4:5000/login
部署因?yàn)?api無法請(qǐng)求到數(shù)據(jù)
接口名稱不用/api
,改用實(shí)際接口的第一個(gè)字段
,然后取消pathwrite
重寫
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3動(dòng)態(tài)路由+菜單欄的實(shí)現(xiàn)示例
在后臺(tái)管理系統(tǒng),可以根據(jù)登錄用戶的不同返回不同路由,頁(yè)面也會(huì)根據(jù)這些路由生成對(duì)應(yīng)的菜單,本文主要介紹了vue3動(dòng)態(tài)路由+菜單欄的實(shí)現(xiàn)示例,感興趣的可以了解一下2024-04-04vue項(xiàng)目base64字符串轉(zhuǎn)圖片的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue項(xiàng)目base64字符串轉(zhuǎn)圖片的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07vue v-for直接循環(huán)數(shù)字實(shí)例
今天小編就為大家分享一篇vue v-for直接循環(huán)數(shù)字實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11詳解Vue的鉤子函數(shù)(路由導(dǎo)航守衛(wèi)、keep-alive、生命周期鉤子)
這篇文章主要介紹了詳解Vue的鉤子函數(shù)(路由導(dǎo)航守衛(wèi)、keep-alive、生命周期鉤子),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07vue全局方法plugins/utils的實(shí)現(xiàn)示例
很多時(shí)候我們會(huì)在全局調(diào)用一些方法,本文主要介紹了vue全局方法plugins/utils的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2024-07-07Springboot運(yùn)用vue+echarts前后端交互實(shí)現(xiàn)動(dòng)態(tài)圓環(huán)圖
我們做項(xiàng)目的時(shí)候,常常需要一些統(tǒng)計(jì)圖來展示我們的數(shù)據(jù),作為web開發(fā)人員,會(huì)實(shí)現(xiàn)統(tǒng)計(jì)圖是我們必會(huì)的技能。我將帶大家來實(shí)現(xiàn)動(dòng)態(tài)餅圖的實(shí)現(xiàn),感興趣的可以了解一下2021-06-06Vue簡(jiǎn)明介紹配置對(duì)象的配置選項(xiàng)
我們知道每一個(gè)vue項(xiàng)目應(yīng)用都是通過vue的構(gòu)造函數(shù)進(jìn)行創(chuàng)建一個(gè)新的vue項(xiàng)目的。創(chuàng)建vue實(shí)例的配置對(duì)象,可以包括一下屬性選項(xiàng),比如:data、methods、watch、template等等,每一個(gè)選項(xiàng)都有不同的功能,大家可以根據(jù)自己的需求選擇不同的配置2022-08-08