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';exportdefaultdefineConfig({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")}}exportdefault api;

注意：这里前面只要加上你上面配置的前缀testaxios（前面不用 / 了），后面跟着原地址的后半部分就欧克了！

utils / requst.js

import axios from"axios"import qs from"querystring"/**
 * 处理失败的方法
 * status:状态码
 * info:信息
 */consterrorHandle=(status,info)=>{switch(status){case400:
            console.log("语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求。")break;case401:// token:令牌
            console.log("服务器认证失败")break;case403:
            console.log("服务器已经理解请求，但是拒绝执行它");break;case404:
            console.log("请检查网络请求地址")break;case500:
            console.log("服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器的程序码出错时出现。")break;case502:
            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);})exportdefault instance

3.调用api相关函数

我是在home.vue里面调用的，直接import api文件以后就可以直接调用函数了

mounted(){
      api.getNcov().then(res=>{
        console.log(res.data)}).catch((error)=>{console.log(error)});}

没啦！！！！！！！！！！ 冲啊啊啊啊啊啊啊！！！！！！！！！