axios中的baseURL
- [01. baseURL与跨域](#01. baseURL与跨域)
- [02. axios的baseurl为相对地址](#02. axios的baseurl为相对地址)
- [03. axios的baseURL是使用绝对路径还是相对路径](#03. axios的baseURL是使用绝对路径还是相对路径)
- [04. API 请求跨域](#04. API 请求跨域)
- [05. 生产环境代理问题](#05. 生产环境代理问题)
- 我理解的baseURL
01. baseURL与跨域
三种模式配置：
- 开发环境 .env.development
- 测试环境 .env.production
- 生产环境 .env.test
注意点：
vue.config.js里的devServer是针对本地开发环境对应的服务器而进行的配置，与生产环境无关。生产环境的配置由运维进行配置
so，devServer里的proxy也只针对本地开发环境而做的跨域配置
axios里的baseURL
如果 axios 的 baseURL 配置的是绝对路径，例如 'http://192.168.1.45:8085/'，axios 会直接发送请求而不经过 devServer.proxy
如果 axios 的 baseURL 设置为相对路径 '/api'，则可以正常使用 devserver.proxy 进行请求转发。也不会有跨域问题。
so, 前端代码中不应该出现后端服务器的域名、端口等信息，都应该在 proxy 中统一配置。
原文链接：https://blog.csdn.net/qq_37332077/article/details/124491034
02. axios的baseurl为相对地址
参考：
03. axios的baseURL是使用绝对路径还是相对路径
都可以！
问题：
javascript
const request = axios.create({
// API 请求的默认前缀
baseURL: env_variable,
timeout: 6000 // 请求超时时间
})对于开发中的这个baseURL请问一般是用绝对路径还是相对路径？
例如
绝对路径: https://website.com/api （允许跨域请求）
相对路径: /api
疑惑点是：如果用相对路径如果前端app不挂在https://website.com
下岂不是访问不了这个服务了？只会访问当前域名下的/api
实际遇到的问题2:
比如在局域网内网部署的服务端和前端app，那么这个前端baseURL应该怎么写呢?是写死内网服务的ip地址（绝对路径）还是用相对路径呢
采纳答案：
前后端都部署在同一台服务器可以用相对路径, 部署在不同服务器用绝对路径
一般写的话，是写相对路径，但一般都有一个全局配置，配置host这个样子
问题和答案链接：
参考：https://segmentfault.com/q/1010000039993241?utm_source=sf-hot-question
04. API 请求跨域
当 Vue 项目需要从不同的域名或端口获取数据时，可能会遇到跨域问题。例如，Vue 前端部署在 http://localhost:8080，而后端 API 部署在 http://api.example.com，这种情况下就会发生跨域请求。
在 Vue 项目中解决 API 请求跨域问题通常有以下几种方法：
后端配置 CORS（跨域资源共享）：如果你有控制后端服务器的权限，可以在后端服务中配置 CORS 头部，允许特定源的请求访问资源。例如，在 Express 框架中，可以使用 cors 中间件来设置 CORS 头部。具体操作取决于你所使用的后端框架或服务器。
**Proxy 代理：**在开发环境中，可以配置 Vue 项目的开发服务器来充当代理，将 API 请求转发到后端服务，从而绕过浏览器的跨域限制。在 Vue 项目的 vue.config.js 文件中配置代理，例如：
javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://api.example.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}这个配置告诉开发服务器将以 /api 开头的请求转发到 http://api.example.com，并且在请求的 URL 中删除 /api 部分。
**JSONP（JSON with Padding）：**虽然 JSONP 并不适用于所有类型的 API 请求，但在某些情况下可能是一种解决跨域问题的有效方法。如果你的后端支持 JSONP，并且 API 请求不涉及敏感数据或操作，可以考虑使用 JSONP 来获取数据。
这些方法中，Proxy 代理是在开发环境中常用的解决方案，而后端配置 CORS 则是在生产环境中常用的解决方案。具体选择取决于你的项目需求以及对后端的控制权限。
参考：https://baijiahao.baidu.com/s?id=1794211871817498016\&wfr=spider\&for=pc
05. 生产环境代理问题
在生产环境中，通常前端和后端会分别运行在不同的端口上，例如前端在 http://localhost:8080，后端在 http://localhost:3000，此时需要配置生产环境的代理来解决跨域问题。
在 Vue 项目中解决生产环境代理问题通常不是必要的，因为在生产环境下，前端和后端通常会部署在同一个域名或者同一个服务器上，不会存在跨域问题。
然而，有时候可能会出现需要在生产环境下使用代理的情况，例如在将前端和后端部署在不同的服务器上，但需要通过同一个域名访问前端和后端资源时。在这种情况下，可以通过服务器配置或者反向代理来实现代理功能，而不是在 Vue 项目中进行配置。
以下是一些解决生产环境代理问题的常用方法：
服务器配置：在生产环境的服务器上进行配置，将前端请求代理到后端服务器上。例如，使用 Nginx 或 Apache 服务器的反向代理功能，将前端路由请求代理到后端服务器上。
API 路径前缀：在 Vue 项目中，可以为所有的 API 请求路径添加一个统一的前缀，例如 /api。然后在生产环境的服务器上配置，将带有 /api 前缀的请求代理到后端服务器上。
Proxy 服务：在生产环境中部署一个专门的代理服务，用来处理前端请求和后端服务之间的通信。这个代理服务可以使用现有的代理工具，例如 Nginx、HAProxy 或者自己编写的代理程序。
无论采用哪种方法，都需要在生产环境的服务器上进行配置，并确保代理功能正常运行。Vue 项目本身通常不会直接处理生产环境的代理问题，而是借助服务器端的配置来实现代理功能。
参考：https://baijiahao.baidu.com/s?id=1794211871817498016\&wfr=spider\&for=pc
我理解的baseURL
javascript
// 创建axios实例
const server = axios.create({
// 请求的域名，基本地址，proxy 代理时会将"/api"以及前置字符串会被替换为真正域名： 相对路径： /dev-api 或者 绝对路径： http://localhost:8991 ； https://api.example.com
baseURL: import.meta.env.VITE_APP_BASE_API,
timeout: 50000,
headers: { "Content-Type": "application/json;charset=utf-8" },
});