詳解Vuejs2.0 如何利用proxyTable實現(xiàn)跨域請求
更新時間：2017年08月03日 10:50:10 作者：Yunfly
本篇文章主要介紹了Vuejs2.0 如何利用proxyTable實現(xiàn)跨域請求，具有一定的參考價值，有興趣的可以了解一下
前言：
本地項目在請求遠(yuǎn)端服務(wù)器接口時，不可避免的會遇到跨域問題,即便是設(shè)置了Access-Control-Allow-Origin：* ，在遇到登錄這些需要本地存入cookie的也會很頭痛，這里筆者介紹一個在vue-cli中配置代理來解決的辦法。
在~/config/dev-server.js中 使用了非常強(qiáng)大的http-proxy-middleware 包。更多高級用法，請查閱其文檔。
用法：
比如我們要請求的遠(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 意為重寫路徑
示例：
比如要請求的接口為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)文章
一文詳解vue3項目實戰(zhàn)中的接口調(diào)用
在企業(yè)開發(fā)過程中,往往有著明確的前后端的分工,前端負(fù)責(zé)接收、使用接口,后端負(fù)責(zé)編寫、處理接口,下面這篇文章主要給大家介紹了關(guān)于vue3項目實戰(zhàn)中的接口調(diào)用的相關(guān)資料,需要的朋友可以參考下2022-12-12
react+vite動態(tài)導(dǎo)入報錯@vite-ignore的問題及解決
這篇文章主要介紹了react+vite動態(tài)導(dǎo)入報錯@vite-ignore的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue模板語法-插值，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-03-03
Element-UI中關(guān)于table表格的那些騷操作(小結(jié))
這篇文章主要介紹了Element-UI中關(guān)于table表格的那些騷操作(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了vue如何動態(tài)生成andv圖標(biāo)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue2項目導(dǎo)出操作實現(xiàn)方法(后端接口導(dǎo)出、前端直接做導(dǎo)出)
這篇文章主要給大家介紹了關(guān)于vue2項目導(dǎo)出操作實現(xiàn)方法的相關(guān)資料,文中介紹的是后端接口導(dǎo)出、前端直接做導(dǎo)出,通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-05-05
在項目開發(fā)中經(jīng)常需要處理重復(fù)點擊導(dǎo)致多次調(diào)用接口的問題,這篇文章主要介紹了項目中如何使用axios過濾多次重復(fù)請求的相關(guān)資料,需要的朋友可以參考下2021-07-07
讓axios發(fā)送表單請求形式的鍵值對post數(shù)據(jù)的實例
今天小編就為大家分享一篇讓axios發(fā)送表單請求形式的鍵值對post數(shù)據(jù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本篇文章主要介紹了vue腳手架vue-cli的學(xué)習(xí)使用教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
Element中el-input密碼輸入框瀏覽器自動填充賬號密碼問題的解決方法
自己寫了一個管理系統(tǒng),登錄成功之后,瀏覽器提示我保存賬號密碼,每次登錄時就會自動回填記住的賬號密碼,方便用戶快速登錄,下面這篇文章主要給大家介紹了關(guān)于Element中el-input密碼輸入框瀏覽器自動填充賬號密碼問題的解決方法,需要的朋友可以參考下2022-09-09