Configuración de proxy Vue de desarrollo de front-end (para resolver el problema de que los nombres de dominio/IP/puertos de front-end y back-end son inconsistentes y no se pueden solicitar)

Descripción del negocio

Supongamos que la dirección del proyecto vue es: localhost:80/, por ejemplo, al solicitar 'http://127.0.0.1:8080/api/user/ss' en la página, la dirección solo debe escribirse como '/ api/usuario/ss' Eso es todo.

configuración de proxy

const {
    
     defineConfig } = require('@vue/cli-service')

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const {
    
     ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = defineConfig({
    
    
  transpileDependencies: true,
  devServer: {
    
    
    port: 8888,
    // 配置代理
    proxy: {
    
    
      '/api': {
    
    
        // 以 “/api” 开头的 代理到 下边的 target 属性 的值 中
        target: 'http://127.0.0.1:8080/',
        changeOrigin: true, // 是否改变域名：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        ws: true, // 是否启用websockets
        pathRewrite: {
    
    
          // 路径重写
          '^/api': '' // 用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add'，直接写'http://127.0.0.1:8080/user/add'
        }
      }
    }
  },
  configureWebpack: {
    
    
    plugins: [
      AutoImport({
    
    
        resolvers: [ElementPlusResolver()],
      }),
      Components({
    
    
        resolvers: [ElementPlusResolver()],
      }),
    ]
  }

})

Editar captura de pantalla

código del servidor back-end

@PostMapping("/login0")
public Result login0(@RequestParam String username, @RequestParam String password){
    
    
    System.out.println(username+" "+password);
    	return ResultUtil.success();
	}
	@PostMapping("/login")
	public Result login(@RequestBody User user) {
    
    
		return ResultUtil.success();
	}
}

Código Vue de front-end

<template>
  <el-button @click="fun1">单击</el-button>
  <el-button @click="fun2">单击</el-button>
</template>

<script>
import {
    
    post,postJson} from '@/utils/axios'

export default {
    
    
  name: 'Demo',

  setup () {
    
    
    const fun1 = () => {
    
    
      post('/api/user/ss', {
    
    
        username: 'zhangsan',
        password: '1234'
      }).then(res => {
    
    
       console.info(res)
      })
    }

    const fun2 = () => {
    
    
      postJson('/api/user/login', {
    
    
        username: 'zhangsan',
        password: '1234'
      }).then(res => {
    
    
        console.info(res)
      })
    }
    return {
    
     fun1,fun2 }
  }
}
</script>