vue2的webpack(vue.config.js) 怎么使用请求转发 devServer.proxy

小妖6662025-03-14 12:02

首先用 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)
    })
  }
}

运行后发现调用成功