Vue:使用 vue-cli 代理请求到单独的后端服务器
Vue: Proxy requests to a separate backend server with vue-cli
我正在使用 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)
进行如下操作:
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
重命名为您想要的任何名称。
我正在使用 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)
进行如下操作:
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
重命名为您想要的任何名称。