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，从而与后端的接口进行通信。
扫一扫
5057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
