使用vue-cli将代理请求发送到单独的后端服务器

Question

使用vue-cli将代理请求发送到单独的后端服务器

node.jsexpressvue.jsvue-cli

3

我正在使用vue-cli webpack模板来生成我的项目，我想将请求代理到一个单独的后端服务器。但我得到了如下的错误信息。

请问我的代码有什么问题吗？

非常感谢！

错误信息

[HPM] Error occurred while trying to proxy request from localhost:8080 to http://localhost:3000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

配置 -> index.js

proxyTable: {
'/api':{
    target: 'http://localhost:3000',
    changeOrigin: true,
    pathRewrite: {
    '^/api': ''
    }
 }

源文件 -> main.js

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import routerConfig from './router.config.js' 
import Axios from 'axios'


Vue.config.productionTip = false;
Vue.prototype.$axios = Axios;
Vue.prototype.HOST = '/api';

Vue.use(VueRouter);

const router = new VueRouter(routerConfig) 

new Vue({
 el: '#app',
 router,  
 components: { App }, 
 template: '<App/>',
})

源代码 -> App.vue

export default{

created(){
  var url = this.HOST
  this.$axios.get(url,{

  }).then((res)=>{

   console.log(res.data)

  },(res)=>{

  alert(res.status)
  })
 }
}

服务器

const express = require('express');
const mysql = require('mysql');

const db = mysql.createPool({
  localhost:'localhost',
  user:'root',
  password:'123456',
  database:'blog'
})

const server = express();

server.use('/api',(req,res)=>{

db.query(`SELECT * FROM articles_table`,(err,data)=>{
   if(err){
     console.error(err);
     res.status(500).send('database error').end();
   }else{
     res.send(data)
   }
 })

})
server.listen(3000)

- Sylvia

可能看起来太明显了，但是...你在收到那个错误时是否正在运行Express服务器？ - acdcjunior

抱歉，您能告诉我当我遇到错误时如何运行Express服务器吗？前端和后端有不同的端口。@acdcjunior - Sylvia

假设你发布的那个文件（其中包含 const express = require('express'); ... server.listen(3000)）名为 server.js。运行它需要使用命令 node server.js（前提是你已经运行过 npm install 命令来下载 express 和 mysql 两个依赖项）。 - acdcjunior

你的意思是我需要先运行 'node server.js' 吗？但如果我运行了 'node server.js'，那么我就无法运行 'npm run dev' 了...我该怎么解决呢？@acdcjunior - Sylvia

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- acdcjunior · Accepted Answer

按照以下步骤操作：

npm install --save-dev concurrently

在 package.json 中添加到 `scripts`：

"server": "node server.js",
"go": "concurrently --kill-others \"npm run dev\" \"npm run server\""

And use, from now on:

npm run go

当然，您可以将go重命名为任何您想要的名称。