axios中的baseURL与跨域问题

万物可爱_85 2024-09-12 08:33:01 阅读 57

axios中的baseURL

01. baseURL与跨域02. axios的baseurl为相对地址03. axios的baseURL是使用绝对路径还是相对路径04. API 请求跨域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%E7%9A%84baseurl%E4%B8%BA%E7%9B%B8%E5%AF%B9%E5%9C%B0%E5%9D%80&needWelcomeRecommand=1

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

都可以!

问题:

<code>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" },

});



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。