前端框架 Nuxt3 集成axios 配置跨域(前端框架学哪个好)

前端框架 Nuxt3 集成axios 配置跨域

目录

一、安装axios

二、Nuxt3项目集成axios

1、项目根目录下创建server/api目录

2、调用封装的单例axios对象

3、页面中调用请求函数

---

推荐整理分享前端框架 Nuxt3 集成axios 配置跨域(前端框架学哪个好)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:前端框架学哪个好,前端框架有哪些,前端框架三大框架,前端框架三大框架,前端框架bootstrap,前端框架排行,前端框架排行,前端框架排行,内容如对您有帮助，希望把文章链接给更多的朋友！

刚开始通过Nuxt3使用axios时，以为axios还需要配置跨域，但经过多次测试发现，在Nuxt3框架里并不需要配置axios的跨域就可跨域请求，这也可能是axios最新版的缘故，下面是nuxt3集成axios的最新实践。

一、安装axios

参考这个进行安装依赖：起步 | Axios 中文文档 | Axios 中文网

yarn add axios二、Nuxt3项目集成axios1、项目根目录下创建server/api目录

用于存储axios的请求文件

创建axios/request.ts文件用于单例实例化axios对象

/** @author Dragon Wu* @since 2022-12-31 16:16*/// @ts-ignoreimport axios from 'axios'// 创建axios实例const requester = axios.create({ //设置基础路径 baseURL: 'https://localhost:3000/', // 请求超时时间 timeout: 15000})// http request 拦截器requester.interceptors.request.use( config => { // 发送请求前的处理 // 这里可以处理 token return config }, err => { // 请求错误的处理 return Promise.reject(err) })// http response 拦截器requester.interceptors.response.use( //处理响应数据 response => { // //判断请求是否正常 // if (response.data.code !== 200) { // //出现错误,错误处理,提示错误信息 // return Promise.reject(response.data) // } else { // //成功返回数据 // return response.data // } return response.data }, // 抛出错误 error => { return Promise.reject(error.response) })export default requester2、调用封装的单例axios对象

每个请求体可以对应建一个请求文件夹，如 user/index.ts文件：

/** @author Dragon Wu* @since 2022-12-31 16:39*/import requester from "~/server/api/axios/request"//请求地址： 基础地址 + api_name + 动作const api_name = "/user/"export default { //用户登录 login(username: string, password: string, code: string) { return requester({ url: `${api_name}/auth`, method: "post", data: { username, password, code } }) }}3、页面中调用请求函数

调用写好的请求函数即可：

<script lang="ts" setup>import userReq from "/server/api/axios/request/user/index.ts";...let promise=userReq.login(username,password,code)console.log(promise)</script>

至此，nuxt3使用axios总结完毕，跨域请求是可以不配置直接请求到的。

参考文献：nuxt3集成axios与element-plus（element-ui）_aiqingqing-up的博客-CSDN博客