vue2的webpackvue.config.js-怎么使用请求转发-devServer.proxy
目录
vue2的webpack(vue.config.js) 怎么使用请求转发 devServer.proxy
首先用 express 搭建后端服务器，注意 使用中间件解析json格式的请求体，才会获取到 post 参数
app.use(express.json());app.js
const express = require('express')
const app = express()
app.use(express.json());
const port = 3000
app.post('/api/vue2', (req, res) => {
console.log(req.body)
res.header('Access-Control-Allow-Origin','*')
res.send({ss: req.body})
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})node app.js 启动服务
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000'
}
}
}
})main.js
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.$axios = axios
new Vue({
render: h => h(App),
}).$mount('#app')App.vue
export default {
name: 'App',
components: {
HelloWorld
},
mounted() {
console.log('mounted')
this.$axios({
method: 'post',
url: '/api/vue2',
data: {
aa: 'test1',
bb: 'test2'
}
}).then(res => {
console.log('res', res)
})
}
}运行后发现调用成功