1. クロスドメインの問題解決
1. vite+vue3 に基づいて構成する場合、vite.congig.js ファイル サーバー プロジェクトにプロキシ プロキシを追加します
ファイル名: vite.congig.js
server: {
open: true,//启动项目自动弹出浏览器
port: '3000',
proxy: {
'/api': {
target: 'http://localhost:8000/api/',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '') // 不可以省略rewrite
}
}
2. axiosをカプセル化するときにベースパスbaseURLを設定します
const instance = axios.create({
baseURL: '/api', // api的base_url import.meta.env.VUE_APP_BASE_API 也可以直接写
timeout: 10000, // 请求超时时间
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
}
);
2. Provide/Injectにより全域でのaxios利用を実現
main.jsで提供する
app.provide('axios', axios)
コンポーネント内に入る
import { inject } から 'vue'
const axios = inject('axios')
axios.post()
具体的なコードは次のとおりです。
1.axios は http.js をカプセル化します
import axios,{AxiosRequestConfig,AxiosResponse} from 'axios'
import { ElLoading } from 'element-plus';
let loading:any;
const startLoading = ()=>{
interface Options {
lock: boolean;
text: string;
background: string;
};
const options:Options = {
lock: true,
text: "加载中...",
background: "rgba(0,0,0,0.7)"
}
loading = ElLoading.service(options)
}
const endLoading = ()=>{
loading.close()
}
const instance = axios.create({
baseURL: '/api', // api的base_url import.meta.env.VUE_APP_BASE_API 也可以直接写
timeout: 10000, // 请求超时时间
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
}
);
// 请求拦截
instance.interceptors.request.use((config:AxiosRequestConfig) =>{
startLoading(); // 开始loading
return config
})
// 响应拦截
instance.interceptors.response.use((response:AxiosResponse) =>{
endLoading(); // 结束loading
return response;
},error =>{
return Promise.reject(error) // 错误提醒
})
export default axios
2. main.jsを全体に適用する
// 加载 axios
import axios from './http'
const app = createApp(App)
// 全局挂载axios
app.provide('axios', axios)
3. コンポーネントで使用される
import { inject } from 'vue'
const axios = inject('axios')
// @ts-ignore
axios.post('/api/users/register', props.registerUser)