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 instance

3.调用api相关函数

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

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

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

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

antdPro项目跨域配置
使用antdPro创建的项目中,在config.js文件中,已经进行了部分的项目配置,其中proxy代理的相关的配置代码也有,但是并不是我们需要的代理地址,所以我们自己还需要根据项目进行更改. 1.c ...
跨域配置-Chorme坑
Nginx进行跨域配置 1.找到对应的网站添加跨域配置,然后重启Nginx server { listen 8880; server_name localhost; #charset koi8-r; ...
cors 前后端分离跨域问题_前后端分离之CORS跨域访问踩坑总结
前言前后端分离的开发模式越来越流行,目前绝大多数的公司与项目都采取这种方式来开发,它的好处是前端可以只专注于页面实现,而后端则主要负责接口开发,前后端分工明确,彼此职责分离,不再高度耦合,但是由于这 ...
html跨域传值,iframe跨域传值踩坑
我在React项目中使用iframe加载angular项目的页面,想要传一串用户信息,由于跨域,采用了HTML5的新方法postMessage(). 花了很多时间,就是传不过去消息,然后angular ...
黑马头条移动端接口丨跨域丨踩坑
新接口: http://toutiao.itheima.net/ 解决跨域: vue.config.js中配置代理 module.exports = {pages: {index: {//入口entr ...
Vue+Flask前后端分离 Vue3跨域配置
Vue+Flask前后端分离 Vue3跨域配置前端端口号为8080 后端端口号为5000 问题描述问题解决接口路径映射前端端口号为8080 后端端口号为5000 后端端口API 代码片. @a ...
html 跨域_常见跨域解决方案以及Ocelot 跨域配置
常见跨域解决方案以及Ocelot 跨域配置 Intro 我们在使用前后端分离的模式进行开发的时候,如果前端项目和api项目不是一个域名下往往会有跨域问题.今天来介绍一下我们在Ocelot网关配置的跨域 ...
常见跨域解决方案以及Ocelot 跨域配置
常见跨域解决方案以及Ocelot 跨域配置 Intro 我们在使用前后端分离的模式进行开发的时候,如果前端项目和api项目不是一个域名下往往会有跨域问题.今天来介绍一下我们在Ocelot网关配置的跨域 ...
解决方案：SpringBoot分布式项目跨域
解决方案:SpringBoot分布式项目跨域场景: web端:localhost:8001 后台user服务:localhost:9001 请求:web端请求后台user服务,报跨域异常异常信息 ...