Vue前后端不同端口的實現(xiàn)方法

更新時間：2018年09月19日 14:55:03 作者：Simpleelegant

今天小編就為大家分享一篇Vue前后端不同端口的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

前端Vue 8080端口，后端Node.js 8085端口主要記錄下前后端不同端口遇到的問題

1、寫服務器端程序，我的在(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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue
端口

相關(guān)文章

vue中forEach循環(huán)的使用講解
這篇文章主要介紹了vue中forEach循環(huán)的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue實現(xiàn)日歷備忘錄功能
這篇文章主要為大家詳細介紹了vue實現(xiàn)日歷備忘錄功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-06-06
vue?cesium加載點與定位到指定位置的實現(xiàn)方法
Cesium是一個用于創(chuàng)建高性能、跨平臺的3D地球和地圖的開源JavaScript庫,它提供了許多功能,包括地理空間數(shù)據(jù)可視化、地理定位和地圖導航等,這篇文章主要介紹了vue?cesium加載點與定位到指定位置,需要的朋友可以參考下
2024-03-03
vue3中事件總線mitt代碼實例(第三方庫mitt)
這篇文章主要給大家介紹了關(guān)于vue3中事件總線mitt(第三方庫mitt)的相關(guān)資料,Mitt是一個在Vue.js應用程序中使用的小型事件總線庫,該庫允許組件進行通信,而不必過度依賴父級或子級組件之間的props,需要的朋友可以參考下
2023-09-09
vue如何使用element組件自定義v-loading
這篇文章主要介紹了vue如何使用element組件自定義v-loading問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue2中使用less簡易教程
這篇文章主要介紹了vue2中使用less簡易教程，由于不需要手動配置webpack，所以vue中使用less是非常簡單的，只需要安裝less，less-loadder就ok了
2018-03-03
一步步講解Vue如何啟動項目
這篇文章主要給大家介紹了關(guān)于Vue如何啟動項目的相關(guān)資料,還介紹了解決vue啟動項目時間很長問題的相關(guān)方法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
2023-02-02
關(guān)于vue-router的beforeEach無限循環(huán)的問題解決
本篇文章主要介紹了關(guān)于vue-router的beforeEach無限循環(huán)的問題解決，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-09-09
vue+element實現(xiàn)表單校驗功能
這篇文章主要介紹了vue+element表單校驗功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-05-05
淺談Vue.js 組件中的v-on綁定自定義事件理解
這篇文章主要介紹了淺談Vue.js 組件中的v-on綁定自定義事件理解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11