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

pan_junbiao2024-09-21 18:14

1、解决跨域问题

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

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

javascript 复制代码

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

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

javascript 复制代码

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(function (error) {
        alert("发生异常：" + error.message);
    });
}

最后重新启动项目就可以了。

2、配置说明

2.1 vue.config.js 配置文件

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

vue.config.js 官方文档： 《vue.config.js 配置参考》

2.2 devServer.proxy 配置项

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：

javascript 复制代码

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

官方文档： 《devServer.proxy 配置项》