詳解Vuejs2.0 如何利用proxyTable實(shí)現(xiàn)跨域請(qǐng)求
前言：
本地項(xiàng)目在請(qǐng)求遠(yuǎn)端服務(wù)器接口時(shí)，不可避免的會(huì)遇到跨域問題,即便是設(shè)置了Access-Control-Allow-Origin：* ，在遇到登錄這些需要本地存入cookie的也會(huì)很頭痛，這里筆者介紹一個(gè)在vue-cli中配置代理來(lái)解決的辦法。
在~/config/dev-server.js中 使用了非常強(qiáng)大的http-proxy-middleware 包。更多高級(jí)用法，請(qǐng)查閱其文檔。
用法：
比如我們要請(qǐng)求的遠(yuǎn)端服務(wù)器為：http://192.168.400:3000
proxyTable: {
'/api/': {
target: 'http://192.168.400:3000',
changeOrigin:true, //set the option changeOrigin to true for name-based virtual hosted sites
pathRewrite: {
'^/api': '/api'
}
},
},
- 通過設(shè)置changeOrigin:true 開啟代理
- pathRewrite 意為重寫路徑
示例：
比如要請(qǐng)求的接口為http://192.168.400:3000/api/main/getUserInfo.action
this.$http.post('/api/main/getUserInfo.action')
.then(res=>{
console.log(res)
})
后續(xù)：
在實(shí)際工作中，我們還需要做些其他的，比如在axios中配置baseUrl：
/**
* Created by Administrator on 2017/4/11.
*/
import axios from 'axios';
// 添加響應(yīng)攔截器
axios.interceptors.request.use(function (config) {
// 配置發(fā)送請(qǐng)求的信息
return config;
}, function (error) {
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
// 配置請(qǐng)求回來(lái)的信息
return response;
}, function (error) {
return Promise.reject(error);
});
var http = axios.create({
timeout: 8000, /*設(shè)置請(qǐng)求超時(shí)時(shí)間*/
baseURL:'http://192.168.400:3000',
});
// Alter defaults after instance has been created
http.defaults.headers.common['Authorization'] = '';
export default http;
/**導(dǎo)出http，在mainjs中引用
import http from './config/axiosConfig';
Vue.prototype.$http = http;
**/
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
前端vue?uni-app?cc-countdown倒計(jì)時(shí)組件使用詳解
cc-countdown是一個(gè)倒計(jì)時(shí)組件，它可以顯示剩余時(shí)間、天數(shù)、小時(shí)數(shù)、分鐘數(shù)和秒數(shù)，在本文中，我們將介紹如何在uni-app中使用cc-countdown組件,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue3計(jì)算屬性和異步計(jì)算屬性方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Element Tooltip 文字提示的使用示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue2集成ElementUI實(shí)現(xiàn)左側(cè)菜單導(dǎo)航功能
本文主要記錄兩個(gè)菜單的生成方式,通過在前端router/index.js中直接進(jìn)行配置,后端返回菜單數(shù)據(jù)進(jìn)行對(duì)應(yīng),可以通過后端返回的菜單數(shù)據(jù)控制權(quán)限,另一種是部門靜態(tài)導(dǎo)航,然后再拼接動(dòng)態(tài)導(dǎo)航,生成完成頁(yè)面導(dǎo)航,感興趣的朋友一起看看吧2025-04-04
在本篇文章里小編給大家整理了一篇關(guān)于vue中4個(gè)自定義指令講解及實(shí)例用法，有興趣的朋友們可以跟著學(xué)習(xí)下。2021-12-12
electron-vue中報(bào)錯(cuò)Cannot?use?import?statement?outside?a?m
Electron 是一個(gè)使用 JavaScript、HTML 和 CSS 構(gòu)建桌面應(yīng)用程序的框架,下面這篇文章主要給大家介紹了關(guān)于electron-vue中報(bào)錯(cuò)Cannot?use?import?statement?outside?a?module的解決方案,需要的朋友可以參考下2023-02-02
前端Vue3引入高德地圖并展示行駛軌跡動(dòng)畫的步驟
最近在Vue項(xiàng)目中引入高德地圖,實(shí)現(xiàn)地圖展示與交互的方法和技術(shù),這里跟大家分享下,這篇文章主要給大家介紹了關(guān)于前端Vue3引入高德地圖并展示行駛軌跡動(dòng)畫的相關(guān)資料,需要的朋友可以參考下2024-09-09
vue實(shí)現(xiàn)虛擬滾動(dòng)渲染成千上萬(wàn)條數(shù)據(jù)
本文主要介紹了vue實(shí)現(xiàn)虛擬滾動(dòng)渲染成千上萬(wàn)條數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
vue自定義穿梭框支持遠(yuǎn)程滾動(dòng)加載的實(shí)現(xiàn)方法
這篇文章主要介紹了vue自定義穿梭框支持遠(yuǎn)程滾動(dòng)加載,iview是全局注入，基本使用原先的類名進(jìn)行二次創(chuàng)建公共組件，修改基礎(chǔ)js實(shí)現(xiàn)邏輯，本文結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-08-08
vue如何實(shí)現(xiàn)拖動(dòng)圖片進(jìn)行排序Vue.Draggable
這篇文章主要介紹了vue如何實(shí)現(xiàn)拖動(dòng)圖片進(jìn)行排序Vue.Draggable，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04