在vue-element-admin项目中解决跨域问题

最新推荐文章于 2025-02-21 01:00:00 发布

草莓冻冻

最新推荐文章于 2025-02-21 01:00:00 发布

阅读量3.6k

点赞数

分类专栏： vue学习文章标签： vue

本文链接：https://blog.youkuaiyun.com/tyoubinn/article/details/109313618

版权

vue学习专栏收录该内容

12 篇文章

订阅专栏

本文介绍了在vue-element-admin项目中如何解决跨域问题，通过vue.config.js的devServer.proxy设置代理，以及创建src/api/test.js文件定义API，成功调用接口并从首页展示数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 vue.config.js 文件中使用 devServer.proxy 选项进行代理配置

devServer: {
 	// ...
    before: require('./mock/mock-server.js'),
    //  开发环境代理配置 解决跨域问题
    proxy: {
      [process.env.VUE_APP_BASE_API]: { //  是.env.development 文件的 /dev-api
        target: ' https://www.easy-mock.com/mock/5f97da2747e82c655543228e/test-admin',
        chargeOrigin: true, // 开启代理服务器
        pathRewrite: {
        // '^/dev-api': '',
          ['^' + process.env.VUE_APP_BASE_API]: '' // /dev-api 替换为空  https://www.easy-mock.com/mock/5f97da2747e82c655543228e/test-admin/dev-api
        }
      }
    }
  },

创建 src/api/test.js 文件，定义调用接口 API

import request from '@/utils/request'
export default{
	test() {
		return request({
				url: '/test',
				method: 'get'
		})
	}
}

调用接口获取数据

<script>
// 引入 api
import api from '@/api/test'
export default {
	//...省略
	created() {
		this.fetchData()
	},
	methods: {
		fetchData() {
			api.test().then(response => {
				console.log(response)
			})
		}
	},
}
</script>