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