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