后台

const express = require('express')
const app = new express()

app.get('/api/news', (req, res) => {
  // res.setHeader("Access-Control-Allow-Origin", '*')
  // res.setHeader("Access-Control-Allow-Headers", '*') //响应所有请求
  // res.setHeader("Access-Control-Allow-Methods", '*') // 支持头信息自定义
  console.log('请求');
  res.send('Hello World66666!')
})
app.get('/api/person', (req, res) => {
  res.send('me is person')
})

app.get('/get/person', (req, res) => {
  res.send('me is get person')
})
app.get('/book', (req, res) => {
  res.send('me is book')
})
app.get('/books', (req, res) => {
  res.send('me is books')
})


app.listen(3000, () => {
  console.log('Server Start');
})

前台配置 proxy

module.exports = {
  devServer: {
    open: true,
    port: 9997,
    // 代理
    proxy: {
      // 拦截以 /api开头的请求
      "/api": {
        // 要跨域的域名 这里写了target的话，axios的baseURL就要取消掉
        target: "http://localhost:3000",
        // 是否开启跨域
        changeOrigin: true,
      },
      "/get": {
        target: "http://localhost:3000",
        changeOrigin: true
      },
      "/data": {
        target: "http://localhost:3000",
        changeOrigin: true,
        // 当接口地址里没有 /data开头 但是前端写了/data/来指定使用代理时，这里使用 ^/data：:"/" 可以把前端写的 /data 去掉来发送请求，否则发送的请求是 带有 /data的
        pathRewrite: {
          // '^/data': '/data'   // 这种接口配置出来     http://XX.XX.XX.XX:8083/data/login
          '^/data': '/' //这种接口配置出来     http://XX.XX.XX.XX:8083/login
        }
      },

    }
  }
}

请求示例

const { data: news } = await this.$http.get("/api/news");
console.log("news:", news);
this.msg = news;

const apiPerson = await this.$http.get("/api/person");
console.log("apiPerson:", apiPerson);

const getPerson = await this.$http.get("/get/person");
console.log("getPerson:", getPerson);

const book = await this.$http.get("/data/book");
console.log("book: ", book);

const books = await this.$http.get("/data/books");
console.log("books: ", books);

请求结果