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

大头女侠

于 2022-10-25 10:20:58 发布

阅读量7.2k

点赞数 8

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_52084329/article/details/127507835

版权

本文详细介绍了在Vue3项目中，基于Vite构建时遇到的跨域问题及其解决方法。首先在vite.config.js中进行正确的跨域配置，接着展示了如何在api/index.js和utils/request.js中组织和封装API请求。通过这些步骤，开发者可以成功调用API并解决前端开发中的跨域难题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最低0.47元/天解锁文章