Proxy代理解决跨域

vue.config.js中

module.exports ={
    devServer:{
        port:4396,
        host:"localhost",
        https:false,
        open:true,
        proxy:{
            [process.env.VUE_APP_BASE_API]:{
                target:process.env.VUE_APP_SERVICE_URL, // 需要代理的目标url
                changeOrigin:true,// 开启代理，允许跨域
                pathRewrite:{
                    ['^'+process.env.VUE_APP_BASE_API]:''// 重写匹配的字段，如果不需要在请求路径上，重写为""
                }
            }
        }
    },
    lintOnSave:false,
    productionSourceMap:false,
}

request.js中

// 引入axios包
import axios from 'axios'
// 首先要先创建实例
// 创建一个request的axios的实例
const request = axios.create({
    // 指定请求的基本url
    // 接口的基准路径,监听拦截以/localhost开头的请求接口
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 5000
})
// 导出axios
// 最后，通过export default语句将request作为默认导出，以便其他模块可以使用该request实例进行网络请求
export default request

在 Vue.js 应用程序中，当需要调用外部 API 接口时，由于存在跨域问题，通常需要使用代理来解决。通过配置 devServer 中的 proxy 选项可以实现简单的反向代理。按照上面的代码配置，即可将以 /api 开头的 HTTP 请求代理到指定的 baseURL。也就是说，当前端浏览器请求 /api 接口时，会被代理服务器转发到 baseURL 上。
在上述代码中，当需要调用 API 接口时，使用 Axios 创建了一个自定义配置的实例，其中 baseURL 字段被设置为 VUE_APP_BASE_API 环境变量的值，这个值可以据需要指向不同的 API 接口地址，从而使代理和 API 调用集成到同一个应用程序中，在本地路由测试，无需担心跨域问题。这样的方式可以帮助开发人员更快地编写并测试代码，而不必在本地安装和配置多个服务。
综上，devServer 中的 proxy 选项可以实现反向代理解决跨域问题，通过设置 Axios 最终实现接口调用和代理的集成化，提高开发效率和代码的可维护性。

同时，在requset.js中设置 登录的request

// 引入axios包
import axios from 'axios'
import memoryUtils from "@/utils/memoryUtils"
import storageUtils from "@/utils/storageUtils"
import { Message, Loading } from 'element-ui'

// 首先要先创建实例
// 创建一个request的axios的实例
const request = axios.create({
    // 指定请求的基本url
    // 接口的基准路径,监听拦截以/localhost开头的请求接口
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 5000
})

// 获取当前登录用户最新权限列表的函数
const getMenus = () => {
    console.log(11111111111);
    // 当前登录用户角色ID
    const roleId = memoryUtils.user.role_id
    // 当前登录用户权限列表
    const userMenus = memoryUtils.user.role.menus;
    // 发送请求获取最新权限列表
    request({
        url: '/menus',
        method: 'post',
        data: {
            roleId
        }
    }).then(response => {
        const resp = response.data
        if (resp.status == 0) {
            // 后端返回最新的权限列表
            const menus = resp.data.menus
            if (userMenus.length == menus.length) {
                userMenus.forEach(item => {
                    if (menus.indexOf(item) == -1) {
                        memoryUtils.user = {}
                        storageUtils.removeUser()
                        Message({
                            message: '当前用户权限被修改，请重新登录',
                            type: 'warning'
                        })
                        window.location.replace('/login')
                    }
                })
            } else {
                memoryUtils.user = {}
                storageUtils.removeUser()
                Message({
                    message: '当前用户权限被修改，请重新登录',
                    type: 'warning'
                })
                window.location.replace('/login')

            }
        }
    })
}

 总结：

通过在 vue.config.js 中配置代理，即 devServer 中的 proxy 选项，可以实现跨域请求的处理。在上述代码中，将以 VUE_APP_BASE_API 环境变量开头的请求路径代理到 VUE_APP_SERVICE_URL 指定目标 URL 上。

在 request.js 中，使用了 axios 发送一个 POST 请求（url: '/menus'）。根据代码逻辑，这个请求需要跨域处理，因为实际的请求路径会被代理到 VUE_APP_SERVICE_URL 配置的目标 URL 上。而代理的目的是为了解决浏览器的同源策略限制，使得前端可以从不同的域名上获取数据，实现跨域访问。

通过使用代理，可以将前端的跨域请求转发到指定的目标 URL，以获得所需的数据。这样可以从本地开发服务器发送请求，而不必担心浏览的限制。这样的功能可以方便开发人员在本地环境进行前后端联调和开发，而无需考虑跨域问题。

在上述代码中，请求 '/menus' 使用了跨域处理，会经代理将其转发到指定的目标 URL 上。其他请求路径如果没有配置在代理中，那么就不需要进行跨域处理。

综上所述，通过配置代理实现了跨域处理，将需要跨域的请求转发到指定的目标 URL 上，使得前端能够正常获取到数据。在上述代码中，'/menus' 请求使用了跨域处理。

=========================================================================

在上述代码中，'/menus' 请求是通过使用 Axios 发起的 POST 请求，所调用的 API 接口需要进行跨域处理。在实际的应用程序中发送这样的请求时，请求会由浏览器先发往前端服务器。由于浏览器的同源策略限制，如果请求路径和当前应用程序所在的域名不一致，浏览器就会拒绝该请求。

为了避免跨域限制的出现，我们可以通过配置代理，在前端服务器中间层处理该请求，从而实现跨域请求的转发。

在本例中，在使用 Axios 发送请求前，先引入了环境变量（VUE_APP_BASE_API）的配置，该变量指向本地应用服务器本身的虚拟路径。这个虚拟路径即是在 devServer 中配置的代理规则：

proxy: {
  [process.env.VUE_APP_BASE_API]: {
    target: process.env.VUE_APP_SERVICE_URL, // 需要代理的目标url
    changeOrigin: true, // 开启代理，允许跨域
    pathRewrite: {
      ['^' + process.env.VUE_APP_BASE_API]: '',// 将请求路径中以 VUE_APP_BASE_API 为开头的部分，替换成空字符。
    },
  },
},

上述代码中，需要代理的目标是 process.env.VUE_APP_SERVICE_URL，即后台服务 Api 的基础路径。且打开 changeOrigin 选项，将其设置为 true，表示开启代理服务器的跨域功能。这样在浏览器发送请求时，该请求会被代理到 process.env.VUE_APP_SERVICE_URL 所代表的 API 接口服务上，从而绕过浏览器的同源策略控制，而顺利访问 API 接口。

在实现'/menus' 接口请求时，'/menus' 是被代理到了 process.env. VUE_APP_SERVICE_URL（即后台服务）上的。而在 request.js 中 Axios 发请求的地址为 '/menus'，这个地址是根据 baseURL 映射补齐的虚拟路径和实际的接口路径组合而成，所以后端服务能正确的得到请求的访问地址，从而将其转发为数据。这就是在'/menus' 请求时如何使用了跨域处理。

---

================================重点在这里=================================

这里的url可以简写是因为在前端的配置文件中使用了代理(proxy)，将请求路径中的匹配字段process.env.VUE_APP_BASE_API重写为空字符串，所以在api接口中可以省略这部分路径。

如果不配置代理，可以使用完整的请求地址来请求后端的接口，例如：

import request from "@/utils/request"

export default {
    getRoleList() {
        return request({
            url: 'http://localhost:3000/manage/role/list',
            method: 'get'
        })
    },
    addRole(name) {
        return request({
            url: 'http://localhost:3000/manage/role/add',
            method: 'post',
            data: {
                name
            }
        })
    },
    update(role) {
        return request({
            url: 'http://localhost:3000/manage/role/update',
            method: 'post',
            data: role
        })
    }
}

在这种情况下，需要在每个请求的url中包含完整的后端接口地址。

================================重点在这里=================================

在前端配置文件中，VUE_APP_BASE_API="/dev-api"是一个代理的配置。这个配置的作用是将前端请求中的/dev-api部分替换为后端接口的地址。这样做的目的是为了简化前端请求的url，以便在开发环境下能够直接请求后端接口，而不需要手动写完整的后端接口地址。

在代理配置中，[process.env.VUE_APP_BASE_API]表示使用VUE_APP_BASE_API变量的值作为代理的目标地址。target则指定了真正的后端接口地址VUE_APP_SERVICE_URL。

举个例子，假设VUE_APP_BASE_API的值为/dev-api，VUE_APP_SERVICE_URL的值为http://localhost:3000。当前端请求/dev-api/manage/role/list时，代理会将请求重写为http://localhost:3000/manage/role/list，从而实现了前端请求的代理转发。这样前端代码中就可以简化为/manage/role/list，而不需要写完整的后端接口地址。

/dev-api只是一个示例，你可以根据你的实际情况来定义代理的路径。

================================重点在这里=================================

这里的/dev-api是前端的默认请求前缀路径 

/dev-api 是前端在开发环境中的默认请求前缀路径。在前端的配置文件中，VUE_APP_BASE_API 的值被设置为 "/dev-api"，这意味着在开发环境中，所有的 API 请求路径都会以 /dev-api 开头。

在代理的配置中，[process.env.VUE_APP_BASE_API] 将会被替换为 /dev-api，并且会被重写为 process.env.VUE_APP_SERVICE_URL，即 http://localhost:3000。这样做的目的是为了在开发环境中使用简化的 URL 进行 API 请求。

所以，当你在前端的 API 接口中使用了 /manage/role/list 这样的路径时，实际上会被重写为 http://localhost:3000/manage/role/list，从而与后端的接口进行通信。

从而！实现了！转发给！代理服务器的！跨！域！

通过配置代理(proxy)来实现跨域请求是其中一种常见的方法。在开发环境中，前端代码运行在不同的域名或端口上，与后端的接口地址不匹配，属于跨域请求。为了解决这个问题，可以在前端配置文件中设置代理，将前端请求重定向到后端接口地址上，从而实现跨域请求。

在这个例子中，通过配置代理将前端的/dev-api重写为http://localhost:3000，实现了跨域请求。当前端发送请求时，会将请求路径中的/dev-api部分替换为http://localhost:3000，从而与后端的接口进行通信。

---