vue3+vite项目跨域配置（踩坑无数篇）

发布时间：2024-04-29 13:01

写这篇多少有点心情复杂，毕竟因为一个巨巨巨巨没意思的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 instance

3.调用api相关函数

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

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

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