詳解Vuejs2.0 如何利用proxyTable實(shí)現(xiàn)跨域請(qǐng)求

更新時(shí)間：2017年08月03日 10:50:10 作者：Yunfly

本篇文章主要介紹了Vuejs2.0 如何利用proxyTable實(shí)現(xiàn)跨域請(qǐng)求，具有一定的參考價(jià)值，有興趣的可以了解一下

前言：

本地項(xiàng)目在請(qǐng)求遠(yuǎn)端服務(wù)器接口時(shí)，不可避免的會(huì)遇到跨域問(wèn)題,即便是設(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'
    }
   },
  },

通過(guò)設(shè)置changeOrigin:true 開(kāi)啟代理
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ì)算屬性方式
這篇文章主要介紹了Vue3計(jì)算屬性和異步計(jì)算屬性方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Element Tooltip 文字提示的使用示例
這篇文章主要介紹了Element Tooltip 文字提示的使用示例，文中通過(guò)示例代碼介紹的非常詳細(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è)菜單的生成方式,通過(guò)在前端router/index.js中直接進(jìn)行配置,后端返回菜單數(shù)據(jù)進(jìn)行對(duì)應(yīng),可以通過(guò)后端返回的菜單數(shù)據(jù)控制權(quán)限,另一種是部門靜態(tài)導(dǎo)航,然后再拼接動(dòng)態(tài)導(dǎo)航,生成完成頁(yè)面導(dǎo)航,感興趣的朋友一起看看吧
2025-04-04
vue中4個(gè)自定義指令講解及實(shí)例用法
在本篇文章里小編給大家整理了一篇關(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ù)，文中通過(guò)示例代碼介紹的非常詳細(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