axios中的baseURL与跨域问题

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



参考:

https://wenku.baidu.com/view/d3bf457cadf8941ea76e58fafab069dc5122476f.html?*wkts*=1723186797795\&bdQuery=axios的baseurl为相对地址\&needWelcomeRecommand=1

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" },
});
相关推荐
活宝小娜1 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点1 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow1 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o1 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic2 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā2 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年4 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder4 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727574 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart4 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter