詳解vue-cli本地環(huán)境API代理設置和解決跨域
前言
我們在使用vue-cli啟動項目的時候npm run dev便可以啟動我們的項目了，通常我們的請求地址是以localhost:8080來請求接口數(shù)據(jù)的，localhost是沒有辦法設置cookie的。
我們可以在vue-cli配置文件里面設置一個代理，跨域的方法有很多，通常需要后臺來進行配置。我們可以直接通過node.js代理服務器來實現(xiàn)跨域請求。
vue proxyTable接口跨域請求調(diào)試
在vue-cli項目中的config文件夾下的index.js配置文件中，dev長這樣子：
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
cssSourceMap: false
}
服務器提供的接口如果長這樣https://www.exaple.com/server_new/login，我們把域名提取出來如https://www.exaple.com；
在config中新建一個文件命名為proxyConfig.js :
module.exports = {
proxy: {
'/apis': { //將www.exaple.com印射為/apis
target: 'https://www.exaple.com', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apis': '' //需要rewrite的,
}
}
}
}
config文件夾下的index.js引入proxyConfig.js：
var proxyConfig = require('./proxyConfig')
config文件夾下的index.js中的dev改成:
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: proxyConfig.proxy,
cssSourceMap: false
}
重啟項目npm run dev：
你會發(fā)現(xiàn)出現(xiàn)了這個
這個時候我們已經(jīng)設置好了本地API代理了
修改本地hosts文件
文件路徑一般是C:\Window\System32\drivers\etc，打開hosts文件，在這一段下面把localhost設置進去
# localhost name resolution is handled within DNS itself. # 127.0.0.1 localhost # ::1 localhost 127.0.0.1 activate.adobe.com 127.0.0.1 practivate.adobe.com 127.0.0.1 lmlicenses.wip4.adobe.com 127.0.0.1 lm.licenses.adobe.com 127.0.0.1 na1r.services.adobe.com 127.0.0.1 hlrcv.stage.adobe.com localhost www.exaple.com
搞定
此時我們已經(jīng)完全解決了跨域問題，以及本地測試后臺無法向我們本地環(huán)境設置cookie的情況了。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue使用一些外部插件及樣式的配置代碼,本文分步驟實例圖文相結合給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11
這篇文章主要介紹了vue 判斷兩個時間插件結束時間必選大于開始時間的代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue3已經(jīng)穩(wěn)定了相當長一段時間了。許多代碼庫都在生產(chǎn)環(huán)境中使用它，其他人最終都將不得不遷移到Vue3。我現(xiàn)在有機會使用它并記錄了我的錯誤，下面這些錯誤你可能想要避免2023-03-03
Vue實現(xiàn)讓頁面加載時請求后臺接口數(shù)據(jù)
這篇文章主要介紹了Vue實現(xiàn)讓頁面加載時請求后臺接口數(shù)據(jù)2022-08-08
在頁面進行pdf預覽的時候，由于文件不能夠打印和下載很難滿足客戶的需求，接下來通過本文給大家介紹vue使用pdf.js來進行pdf預覽,需要的朋友可以參考下2021-12-12
本文主要介紹了vue項目中路由懶加載的三種方式,主要包括vue異步組件,組件懶加載,webpack的require.ensure(),具有一定的參考價值,感興趣的可以了解一下2024-01-01
使用electron-builder將項目打包成桌面程序的詳細教程
這篇文章主要介紹了使用electron-builder把web端的項目打包生成桌面程序,并可安裝程序,文中通過代碼示例和圖文結合的方式給大家介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了如何用命令窗口的方式創(chuàng)建Vue項目過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue3實現(xiàn)獲取驗證碼按鈕倒計時效果,用戶點擊獲取驗證碼按鈕,發(fā)送請求給后端,按鈕失效,并且開始倒計時60秒；在此期間,用戶無法再次點擊按鈕,即使用戶刷新頁面,倒計時依然存在,直到倒計時完畢,按鈕恢復,感興趣的小伙伴跟著小編一起來看看吧2024-10-10
本篇文章主要介紹了Vue利用canvas實現(xiàn)移動端手寫板的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05