Vue使用代理方式解决跨域问题

最新推荐文章于 2025-06-25 16:04:19 发布

pan_junbiao

最新推荐文章于 2025-06-25 16:04:19 发布

阅读量1.8k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： Vue 我の原创文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/pan_junbiao/article/details/142383686

1、解决跨域问题

如果 Vue 前端应用请求后端 API 服务器，出现跨域问题（CORS），如下图：

解决方法：在 Vue 项目中，打开 vue.config.js 配置文件，在配置文件中使用代理解决跨域问题。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    proxy: 'http://localhost:8085',  //使用代理，解决跨域问题
  }
})

注意：配置代理完成后，请求的URL前面不需要再加上完整的域名了，示例如下：

function getUserInfo(userId) {
    //使用 axios 的 GET 请求
    axios({
        method: 'GET',
        //注意：因为配置了代理服务器（解决跨域问题），所以请求的URL前面不需要再加上完整的域名
        //url: `http://localhost:8085/user/getUserInfo/${userId}` //错误
        url: `/user/getUserInfo/${userId}` //正确
    }).then(
        function (response) {
            userInfo.value = response.data;
        }
    ).catch