前言：在实际开发过程中，前后端分离必定会存在跨域，配置同意域名，设置代理解决这个问题。

在vue.config.js新增配置

module.exports = defineConfig({
	 devServer:{
	  	// 统一设置代理
	 	// proxy: "http://test.fastadmin.cn"
	  	// 为单个请求设置代理
	    proxy:{
	        '/api':{
	            target: 'http://test.fastadmin.cn',//代理地址，这里设置的地址会代替axios中设置的baseURL
	            changeOrigin: true,// 如果接口跨域，需要进行这个参数配置, 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端端和服务端进行数据的交互就不会有跨域问题
	            //ws: true, // proxy websockets
	            //pathRewrite方法重写url
	            //pathRewrite: {'^/api': '/'} 重写之后url为 http://test.fastadmin.cn/xxxx
	            //pathRewrite: {'^/api': '/api'} 重写之后url为 http://test.fastadmin.cn/api/xxxx
	            pathRewrite: {
	                '^/api': '/'
	           }
	    	}
	    }
	},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

如果不同环境要配置不同的域名可以看我另一篇文章：vue分生产环境，测试环境

注意

'/api': {}：表示接口只要是’/api’开头的才用代理，
如你的请求接口是 /api/xx/xx
实际请求路径就是 http://test.fastadmin.cn/api/xx/xx
pathRewrite：的作用是如果我们的实际接口路径是没有/api的，所以需要用'^/api': '/'，表示请求接口时去掉api
如你的请求接口是 /api/xx/xx
实际请求路径就是 http://test.fastadmin.cn/xx/xx

使用

1.后端写一个测试接口

2.前端页面调用接口

<template>
    <div>
        <h1>page1h1>
        <p>{{ msg }}p>
        <el-button type="primary" plain @click="downloadList()">主要按钮el-button>
    div>
template>
<script>
export default {
    data() {
        return {
            msg: "我是page1组件",
            pagnation:{
                total:1000,
            }
        }
    },
    methods: {
        downloadList() {
            //请求操作
            this.axios.get('/api/index.php/api/index/test',{}).then(res => {
            	console.log(res)
            }).catch(err => {
            });
        }
    }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

axios的使用可以看我另一篇文章：axios和vue-axios的使用

3.发起请求结果