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

目录

一、安装axios

二、Nuxt3项目集成axios

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

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

3、页面中调用请求函数

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

一、安装axios

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

yarn add axios

二、Nuxt3项目集成axios

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

用于存储axios的请求文件

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

/* * @author Dragon Wu * @since 2022-12-31 16:16 */ // @ts-ignore import 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 requester

2、调用封装的单例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博客