Vue3+Vite解决跨域问题

Vue3项目

首先找到项目里面的vite.cofig.js找到代码中的server然后替换成下面的即可

server: { //主要是加上这段代码
      //host+port实际上就是项目的启动地址是多少
      host: '127.0.0.1',
      port: 8001,
      proxy: {
        '/api': {
          //这里的target实际上就是真实的后端地址,看看你的路径前缀如果有api的话在端口后面加上api
          target: 'http://127.0.0.1:7090/api',	//实际请求地址
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        },
      }
    }

附上vite.config.js的所有代码

import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import { wrapperEnv } from './build/utils';
import { createProxy } from './build/vite/proxy';
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig(({ mode, command}) => {
  const root = process.cwd();
  const env = loadEnv(mode, root);
  const viteEnv = wrapperEnv(env);
  const { VITE_PORT, VITE_PROXY } = viteEnv;
  return {
    plugins: [vue()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    server: { //主要是加上这段代码
      host: '127.0.0.1',
      port: 8001,
      proxy: {
        '/api': {
          target: 'http://127.0.0.1:7090/api',	//实际请求地址
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        },
      }
    }
  }
})

此时去使用APIfox访问地址就可以访问到了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/640753.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Google Play开发者账号被封关联风险分析以及提高上包成功率方法

一:谷歌通过多种方法判断应用是否为马甲包或存在关联,但具体算法和方法并没有对外公开,以下是一些可能属性: 1、开发者账号资料 开发者的身份,付款银行卡,绑定的手机号,辅助邮箱等,其中收款账户还是在其中…

记录github小程序短视频系统的搭建过程

GitHub - lkmc2/AwesomeVideoWxApp: 《倾心短视频》微信小程序 这个项目按readme中的来可以部署成功,但是会发现图片、视频全是空的,如下图: 修改源代码,更换图片上传与保存地址 大概涉及到这些代码块,进行更改即可。…

Ubuntu 20.04中用scrapy爬取博客园新闻首页的简单示例

一、梳理scrapy项目目录创建: 1、命令行终端定位到pycharm主目录:cd PycharmProjects 2、建立项目名称:scrapy startproject searchArticle 3、定位到项目目录下:cd searchArticle 4、设置爬虫名称与欲爬取的域名地址&#xf…

Python使用连接池操作MySQL

测试环境说明:Python版本是 3.8.10 ,DBUtils版本是3.1.0 ,pymysql版本是1.0.3 首先安装指定版本的连接池库DBUtils 、还有pymysql pip install DBUtils3.1.0 pip install pymysql1.0.3创建文件 sqlConfig.py # sqlConfig.pyimport pymysql…

FL Studio21中文版新特性!揭秘中文水果编曲神器

FL Studio 21,被广大音乐创作者昵称为“水果编曲软件”,是比利时的Image-Line公司研发的一款完整的音乐制作环境或数字音频工作站(DAW)。自从1997年首次推出以来,FL Studio一直是许多音乐制作人和爱好者的首选&#xf…

基于 Java 的浏览器——JxBrowser使用分享

软件介绍 JxBrowser 是一个基于 Java 的浏览器,它使用 Chromium 引擎来提供高性能的网页渲染和丰富的功能。它支持多种 GUI 框架,如 Swing、JavaFX 和 SWT,使得在 Java 应用程序中嵌入浏览器组件变得简单。 JxBrowser 是一个适用于多种用途…

Docker技术搭建Grafana监控平台

centos7虚拟机和docker的安装:可以参考之前的博文 CPU、mysql-exporter、docker监控模板:百度网盘 提取码:0000 先查看服务器时间是否和当前时间一致,如果不一致,查看对应设置:centos7时间同步博文 一、…

2024最新php项目加密源码

压缩包里有多少个php就会被加密多少个PHP、php无需安装任何插件。源码全开源 如果上传的压缩包里有子文件夹(子文件夹里的php文件也会被加密),加密后的压缩包需要先修复一下,步骤:打开压缩包 》 工具 》 修复压缩文件…

大小字符判断

//函数int my_isalpha(char c)的功能是返回字符种类 //大写字母返回1,小写字母返回-1.其它字符返回0 //void a 调用my_isalpha(),返回大写,输出*;返回小写,输出#;其它,输出? #inclu…

MySQL存储过程for循环处理查询结果

在MySQL数据库中,存储过程是一种预编译的SQL语句集,可以被多次调用。在MySQL中使用存储过程查询到结果后,有时候需要对这些结果进行循环处理。 1. 创建表 CREATE TABLE t_job (job_id int(11) unsigned NOT NULL AUTO_INCREMENT,job_name v…

python02 循环与容器

一、if的条件判断 1-1 if elif else 判断年龄属于哪个年龄段 # 判断学生 core input(请输入成绩) ​ if int(core) >90 :print(优秀) elif int(core) >70 and int(core) <90:print(中等) elif int(core) >60 and int(core) <70:print(及格) else:print(不及…

抖音运营_打造高流量的抖音账号

目录 一 账号定位 行业定位 用户定位 内容定位 二 账号人设 我是谁? 我的优势 我的差异化 三 创建账号 名字 头像 简介 四 抖音养号 为什么要养号&#xff1f; 抖音快速养号 正确注册抖音账号 一机一卡一号 实名认证 正确填写账号信息 养号期间的操作 五…

如何在Windows 11和10上检查计算机的正常运行时间,这里有两种方法

序言 你的计算机的正常运行时间告诉你打开计算机已经有多长时间了。如果你需要这些信息进行故障排除或其他操作&#xff0c;那么很容易在Windows 11和Windows 10操作系统上找到你的正常运行时间。我们将向你展示图形和命令行方法。让我们开始吧。 使用任务管理器查找Windows正…

webman使用summernote富文本编辑器

前言 Summernote富文本编辑器功能强大&#xff0c;可以直接从word直接复制内容过来而不破坏原有的文档格式&#xff0c;非常适合做商品详情等内容的编辑工具。本文将展示如何在php高性能框架webman中使用summernote编辑器。 下载 去Bootstrap 中文网、Summernote、jQuery官网…

JavaWeb知识点汇总(Tomcat、Servlet、MVC架构、模拟IOC、Filter、Listener)

CS、BS架构模式 创建Web项目 介绍 Tomcat是Web容器。可以将一个或多个Web项目 部署在tomcat服务器中。 Tomcat目录&#xff1a; 创建web项目步骤 新建一个project项目 pro-web 项目project和模块module的区别&#xff1a; project 通常指一个完整的软件开发实体&#xff0c;它…

小程序视频怎么保存到本地相册

在快节奏的生活中&#xff0c;小程序已成为我们获取信息和娱乐的重要渠道。但当您遇到那些精彩绝伦的小程序视频&#xff0c;是否曾想过如何将它们保存到本地相册&#xff0c;以便随时回味&#xff1f;无论您是安卓用户还是iPhone用户&#xff0c;本文将为您揭秘如何轻松实现这…

机器学习之常用算法与数据处理

一、机器学习概念&#xff1a; 机器学习是一门多领域交叉学科&#xff0c;涉及概率论、统计学、计算机科学等多门学科。它的核心概念是通过算法让计算机从数据中学习&#xff0c;改善自身性能。机器学习专门研究计算机怎样模拟或实现人类的学习行为&#xff0c;以获取新的知识…

完成商品SPU管理页面

文章目录 1.引入前端界面1.将前端界面放到commodity下2.创建菜单3.进入前端项目&#xff0c;使用npm添加依赖1.根目录下输入2.报错 chromedriver2.27.2的问题3.点击链接下载压缩包&#xff0c;然后使用下面的命令安装4.再次安装 pubsub-js 成功5.在main.js中引入这个组件 4.修改…

Java进阶学习笔记5——Static应用知识:单例设计模式

设计模式&#xff1a; 架构师会使用到设计模式&#xff0c;开发框架&#xff0c;就需要掌握很多设计模式。 在Java基础阶段学习设计模式&#xff0c;将来面试笔试的时候&#xff0c;笔试题目会经常靠到设计模式。 将来会用到设计模式。框架代码中会用到设计模式。 什么是设计…

linux常用软件源码安装-2

jdk、tomcat、Apache、nginx、mysql、redis、maven、nexus安装文档&#xff1a;linux常用软件源码安装 9.sonarqube安装 前置条件&#xff1a;mysql5.6和jdk8 1.下载 官网 2.安装unzip并解压sonarqube&#xff0c;然后移动到/usr/local yum install -y unzip unzip sonarq…