vue3+vite项目跨域配置踩坑实战篇
作者：大头女侠
vue3是一个流行的前端框架,vite是一个快速的构建工具,下面这篇文章主要给大家介绍了关于vue3+vite项目跨域配置踩坑实战的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
写这篇多少有点心情复杂，毕竟因为一个巨巨巨巨没意思的bug卡了两整天…
废话不多说啦，开篇入题叭，希望大家都能改好自己的bugggggg！！！
1.vite.config.js配置
注意：因为我是用vite创建的，不是vue-cli，当时搜了好多教程都教的是新建一个vue.config.js，发现根本没有生效，所以，如果使用vite创建的项目就在vite.config.js里面配置如下代码：
以我要访问的疫情数据api为例，原api地址：https://api.inews.qq.com/testaxios/newsqa/v1/automation/modules/list?modules=FAutoCountryConfirmAdd,WomWorld,WomAboard
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
server: {
port: 3000,
proxy: {
'/testaxios': {
target: 'https://api.inews.qq.com/',
// target就是你要访问的目标地址，可以是基础地址，这样方便在这个网站的其他api口调用数据
ws: true,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/testaxios/, ''),
// 要记得加rewrite这句
},
},
},
})2.api文件
我写代码的时候，把api相关的调用函数封装在了一个文件里面，在api/index.js文件里，然后其他地方在用的时候就可以直接调用函数了。
除此之外，axios的请求也被我封装起来了，copy的网上的封装代码，也可以直接引入axios，需要的话拿走就好了。
api / index.js
import axios from "../utils/requst"
// import axios from "axios"
const api = {
// 疫情数据
getNcov(){
return axios.get("testaxios/newsqa/v1/automation/modules/list?modules=FAutoCountryConfirmAdd,WomWorld,WomAboard")
},
// 城市数据
getNcovCity(){
return axios.get("testaxios/newsqa/v1/query/inner/publish/modules/list?modules=statisGradeCityDetail,diseaseh5Shelf")
},
getNcovCity2(){
return axios.get("newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare")
}
}
export default api;注意：这里前面只要加上你上面配置的前缀testaxios（前面不用 / 了），后面跟着原地址的后半部分就欧克了！
utils / requst.js
import axios from "axios"
import qs from "querystring"
/**
* 处理失败的方法
* status:状态码
* info:信息
*/
const errorHandle = (status,info) =>{
switch(status){
case 400:
console.log("语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求。")
break;
case 401:
// token:令牌
console.log("服务器认证失败")
break;
case 403:
console.log("服务器已经理解请求，但是拒绝执行它");
break;
case 404:
console.log("请检查网络请求地址")
break;
case 500:
console.log("服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器的程序码出错时出现。")
break;
case 502:
console.log("作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。")
break;
default:
console.log(info)
break;
}
}
/**
* 创建axios实例对象
*/
const instance = axios.create({
// 公共配置
// baseURL:"http://iwenwiki.com",
timeout:8000
})
/**
* 处理拦截器
*/
/**
* 请求拦截
*/
instance.interceptors.request.use(
config => {
if(config.method === "post"){
config.data = qs.stringify(config.data)
}
return config
},
error => Promise.reject(error)
)
/**
* 响应拦截
*/
instance.interceptors.response.use(
// 完成了
response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),
error => {
const { response } = error;
errorHandle(response.status,response.info);
}
)
export default instance3.调用api相关函数
我是在home.vue里面调用的，直接import api文件以后就可以直接调用函数了
mounted(){
api.getNcov().then(res=>{
console.log(res.data)
}).catch((error)=>{console.log(error)});
}没啦！！！！！！！！！！ 冲啊啊啊啊啊啊啊！！！！！！！！！
总结
到此这篇关于vue3+vite项目跨域配置踩坑实战的文章就介绍到这了,更多相关vue3+vite跨域配置踩坑内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！