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

Posted 2023-02-22

【中文标题】Vue：使用 vue-cli 将请求代理到单独的后端服务器

【英文标题】：Vue: Proxy requests to a separate backend server with vue-cli

【发布时间】：2018-10-04 21:34:07

【问题描述】：

我正在使用 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': ''
    
 

src -> 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/>',
)

src -> 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)

【问题讨论】：

可能看起来太明显了，但是......当您遇到该错误时，您的快速服务器是否正在运行？

对不起，您能告诉我在出现错误时如何运行快速服务器吗？前端和后端有不同的端口@acdcjunior

说你发布的那个文件的内容（const express = require('express'); ... server.listen(3000)）在server.js。你必须像node server.js 一样运行它（前提是你之前运行npm install 来下载express 和mysql 依赖项）

你的意思是我需要先运行'node server.js'吗？但是如果我运行“node server.js”，那么我无法运行“npm run dev”...我该如何解决这个问题？@acdcjunior

【参考方案1】：

如下操作：

npm install --save-dev concurrently

在 package.json 中添加到 scripts：

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

从现在开始使用：

npm run go

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

【讨论】：

你能再试一次吗？我已经换了包。

好，我这里用cli创建一个项目，我测试一下告诉你，好吗？同时，我的建议是你打开两个shell。在一个中运行node server.js，在另一个中运行npm run dev，就像往常一样。

啊，太好了，我没看到评论。很高兴它成功了！