axios中的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为相对地址

参考：
https://wenku.baidu.com/view/d3bf457cadf8941ea76e58fafab069dc5122476f.html?wkts=1723186797795&bdQuery=axios%E7%9A%84baseurl%E4%B8%BA%E7%9B%B8%E5%AF%B9%E5%9C%B0%E5%9D%80&needWelcomeRecommand=1

03. axios的baseURL是使用绝对路径还是相对路径

都可以！

问题：

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 文件中配置代理，例如：

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

// 创建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" },
});