在
Vue3 中封装
axios 实现
跨域请求，可按以下步骤操作：
### 1
. 安装
axios
在
项目根目录下，使用 npm 或 yarn 安装
axios：
```bash
npm install
axios
```
或
```bash
yarn add
axios
```
### 2
. 封装
axios
创建一个 `request` 文件夹，并在其中创建 `
axios.js` 文件用于封装
axios 请求。示例代码如下：
```
javascript
// 引入
axios
import
axios from "
axios";
// 创建
axios实例
const Service =
axios.create({
//
请求的根路径
baseURL: "/api",
// 定义统一的
请求头
headers: {
"content-Type": "application/
json",
},
// 配置
请求超时时间
timeout: 5000,
});
//
请求拦截器
Service
.interceptors
.request
.use((config) => {
config
.headers
.common["Authorization"] = window
.sessionStorage
.getItem("token") == null ? null : window
.sessionStorage
.getItem("token");
return config;
});
// 响应拦截器
Service
.interceptors
.response
.use((config) => {
// 获取接口返回结果
const res = config
.data;
console
.log("response", res);
if (res
.status === "success") {
return res;
} else {
console
.log("
请求失败！", res
.status);
// 这里假设Element是ElementPlus的实例，需要根据实际情况修改
Element
.error(res
.message || "网络异常");
}
});
export default Service;
```
### 3
. 配置
跨域代理
在 `
vue.config
.js` （如果是
Vue CLI
项目）或 `vite
.config
.js` （如果是 Vite
项目）中配置
跨域代理。
####
Vue CLI
项目（`
vue.config
.js`）
```
javascript
module
.exports = {
devServer: {
open: true,
host: 'localhost',
port: 8080,
https: false,
// 以下为需要
跨域的配置
proxy: {
// 配置
跨域
'/api': {
target: 'https://query
.asilu
.com/weather', // 填写
请求的目标地址
changeOrigin: true, // 允许
跨域
pathRewrite: {
'^/api': '' //
请求的时候使用这个api就可以
}
}
}
}
}
```
#### Vite
项目（`vite
.config
.js`）
```
javascript
import { defineConfig } from 'vite'
import
vue from '@vite
js/plugin-
vue'
export default defineConfig({
plugins: [
vue()],
server: {
proxy: {
'/api': {
target: 'https://query
.asilu
.com/weather',
changeOrigin: true,
rewrite: (path) => path
.replace(/^\/api/, '')
}
}
}
})
```
### 4
. 在 `main
.js` 中引入封装的
axios
```
javascript
// 引入封装
Axios请求
import
Axios from '
./request/
axios';
import { createApp } from '
vue'
import App from '
./App
.vue'
import { createRouter, createWebHistory } from '
vue-router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index
.css'
import
axios from '
axios'
import {
VueAxios } from '
vue-
axios'
const app = createApp(App)
.use(
VueAxios,
axios)
.use(ElementPlus)
.use(
Axios)
app
.mount('#app')
```
### 5
. 在组件中使用封装的
axios
```
vue
<template>
<div>
<button @click="fetchData">获取数据</button>
</div>
</template>
<script setup>
import
Axios from '
../request/
axios';
const fetchData = async () => {
try {
const response = await
Axios.get('/some-api');
console
.log(response
.data);
} catch (error) {
console
.error(error);
}
};
</script>
```
本文讲述了在Vue项目中遇到的跨域问题，通过在vue.config.js中配置请求代理以及修改URL结构来解决，详细介绍了报错情况和解决方案。
扫一扫
3796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
