Vue前后端不同端口的實現(xiàn)方法
更新時間：2018年09月19日 14:55:03 作者：Simpleelegant
今天小編就為大家分享一篇Vue前后端不同端口的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
前端Vue 8080端口，后端Node.js 8085端口 主要記錄下前后端不同端口遇到的問題
1、寫服務(wù)器端程序，我的在(node_proxy/index.js)下
app.all('*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', req.headers.origin || '*');
res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization,\'Origin\',Accept,X-Requested-With');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.header('Access-Control-Allow-Credentials', true);
res.header('X-Powered-By', ' 3.2.1');
res.header('Content-Type', 'application/json;charset=utf-8');
if (req.method === 'OPTIONS') {
res.sendStatus(200);
} else {
next();
}
});
這段代碼很重要，要是沒有的話會出現(xiàn) No 'Access-Control-Allow-Origin' header is present on the requested resource 錯誤。
2、在前端用axios寫get請求處理程序，寫在了Card模板下
mounted(){
axios.get(HOST)
.then(response => {
this.sed = response.data.data;
})
}
3、在config/index.js下配置proxyTable：
proxyTable: {
'/seller': {
target: 'http://localhost:8085',
changeOrigin: true,
pathRewrite: {
'^/seller': '/seller'
}
}
},
4、分別啟動前后端，OK~\(≧▽≦)/~啦啦啦~
以上這篇Vue前后端不同端口的實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue圖片上傳本地預(yù)覽組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
vue2中使用echarts實現(xiàn)中國地圖、在中國地圖上標(biāo)注坐標(biāo)散點圖的操作代碼
這篇文章主要介紹了vue2中使用echarts實現(xiàn)中國地圖、在中國地圖上標(biāo)注坐標(biāo)散點圖,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)pc端拍照上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue.js 實現(xiàn)評價五角星組件的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
Vue 中 a標(biāo)簽上href無法跳轉(zhuǎn)的解決方式
今天小編大家分享一篇Vue 中 a標(biāo)簽上href無法跳轉(zhuǎn)的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
element-table如何實現(xiàn)自定義表格排序
這篇文章主要介紹了element-table如何實現(xiàn)自定義表格排序，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了Vue 進(jìn)階教程之v-model詳解 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了Vue中$router與?$route的區(qū)別詳解，文章圍繞主題展開詳細(xì)的內(nèi)容戒殺，具有一定的參考價值，需要的朋友可以參考一下2022-09-09
在vue中路由使用this.$router.go(-1)返回兩次問題
這篇文章主要介紹了在vue中路由使用this.$router.go(-1)返回兩次問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要為大家詳細(xì)介紹了vue組件間通信解析，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03