VUE3解决跨域问题

本文基于vue3 + vite  + element-plus  +  pnpm

报错:**** has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

原因:前端不能直接访问其他IP,需要用vite.config.ts    (其他框架文件名可能略有不同)做个代理,拦截本地IP替换成外部IP

解决方案:

比如在页面中,我们要访问一个页面

http://10.10.10.10:8082/webroot/88888

我们本地IP是:

http://11.11.11.11:8000/mvp

那么就需要配置跨域:

1. 在vite.config.ts配置,

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/


export default defineConfig({
    base: '/mvp',
  plugins: [vue()],
  server:{
    host:'0.0.0.0',
    port:'8000',
    public: '11.11.11.11:8000',

    // 配置多个代理
    proxy: {
 

          '/webroot': {
            target: 'http://10.10.10.10:8082/webroot/88888',
            changeOrigin: true,
            ws: true,
        },

    
  },
}})
 

重点就是这个蓝色部分,

2. 在页面中 把URL的IP改成 本地IP

ps:相当于 前端页面是访问的本地IP,但是在 vite 文件中被修改成真正的IP

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【一生一芯】笔记

文章目录 一级目录二级目录三级目录缓存的验证 一级目录 Data, 二级目录 三级目录 缓存的验证

应急响应:应急响应流程,常见应急事件及处置思路

「作者简介」:冬奥会网络安全中国代表队,CSDN Top100,就职奇安信多年,以实战工作为基础著作 《网络安全自学教程》,适合基础薄弱的同学系统化的学习网络安全,用最短的时间掌握最核心的技术。 这一章节我们需…

基于X86+FPGA+AI的芯片缺陷检测方案

应用场景 随着半导体技术的发展,对芯片的良率要求越来越高。然而集成电路芯片制造工艺复杂,其制造过程中往往产生很多缺陷,因此缺陷检测是集成电路制造过程中的必备工艺。 客户需求 小体积,低功耗 2 x USB,1 x LAN Core-i平台无…

CVE-2020-26048(文件上传+SQL注入)

简介 CuppaCMS是一套内容管理系统(CMS)。 CuppaCMS 2019-11-12之前版本存在安全漏洞,攻击者可利用该漏洞在图像扩展内上传恶意文件,通过使用文件管理器提供的重命名函数的自定义请求,可以将图像扩展修改为PHP&#xf…

【微服务】微服务之Feign 与 Ribbon

文章目录 强烈推荐引言优点Feign示例什么是Ribbon?Ribbon 的优点Netflix Feign 和 Ribbon整合Feign 与 Ribbon 的关系Feign 与 Ribbon 结合使用的示例配置文件(application.yml)说明: Feign 与 Ribbon 结合使用的应用场景1. 动态服…

OpenStack开源虚拟化平台(二)

目录 三、对象存储服务Swift(一)Swift特性(二)应用场景(三)Swift主要组件(四)Swift基本原理(五)实例分析 四、镜像服务Glance(一)Glan…

STM32自己从零开始实操08:电机电路原理图

一、LC滤波电路 其实以下的滤波都可以叫低通滤波器。 1.1倒 “L” 型 LC 滤波电路 1.1.1定性分析 1.1.2仿真实验 电感:通低频阻高频的。仿真中高频信号通过电感,因为电感会阻止电流发生变化,故说阻止高频信号 电容:隔直通交。…

华为云服务器系统重装

文章目录 1 登录云服务器,点击控制台2 选择实例3 点击更多,选择重装系统4 勾选关机,填写密码,点击确定5 选择自己方便的认证方式6 同意协议7 等待完成8 重装完毕 1 登录云服务器,点击控制台 2 选择实例 3 点击更多&…

C语⾔数据类型和变量

C语⾔数据类型和变量 1.数据类型介绍1.1 字符型1.2 整型1.3 浮点型1.4 布尔类型1.5 各种数据类型的长度1.5.1 sizeof操作符1.5.2 数据类型长度1.5.3 sizeof中表达式不计算 2. signed 和 unsigned3. 数据类型的取值范围4. 变量4.1 变量的创建4.2 变量的分类 5. 算术操作符&#…

[每周一更]-(第103期):GIT初始化子模块

文章目录 初始化和更新所有子模块分步骤操作1. 克隆包含子模块的仓库2. 初始化子模块3. 更新子模块 查看子模块状态提交子模块的更改处理子模块路径错误的问题 该问题的缘由是因为:在写某些代码的时候,仓库中有些文件夹,只提交了文件夹名称到…

缓存双写一致性(笔记)

缓存更新方案 旁路缓存模式 这是比较多的 旁路缓存模式:缓存有就返回,没有数据库查询,放入缓存返回。 还有些常用缓存策略 读穿透模式 读穿透和旁路很相似,程序不需要关注从哪里读取数据,它只需要从缓存查询数据。…

海思SS928/SD3403开发笔记4——u盘挂载

首先一定要将u盘格式化成fat32。 挂载 mkdir /mnt/usb mount /dev/sda1 /mnt/usb成功示意图: 取消挂载 umount /mnt/usb

学习笔记——动态路由——OSPF(OSPF协议的工作原理)

八、OSPF协议的工作原理 1、原理概要 (1)相邻路由器之间周期性发送HELLO报文,以便建立和维护邻居关系 (2)建立邻居关系后,给邻居路由器发送数据库描述报文(DBD),也就是将自己链路状态数据库中的所有链路状态项目的摘要信息发送给邻居路由器…

vite+vue集成cesium

1、创建项目、选择框架vuejs pnpm create vite demo_cesium 2、进入项目安装依赖 cd demo_cesium pnpm install3、安装cesium及插件 3、pnpm i cesium vite-plugin-cesium 4、修改vite-config.js import { defineConfig } from vite import vue from vitejs/plugin-vue impo…

怎么测试远程服务器能否连通

远程服务器连接测试的方法很多,下面简单介绍下其中两种方法。 ping命令 按WINR快截键,打开“运行”对话框,输入cmd,回车,打开命令提示符。 输入ping IP地址或ping 域名即可,如ping360服务器通不通&#xf…

第十四届蓝桥杯省赛C++B组D题【飞机降落】题解(AC)

解题思路 这道题目要求我们判断给定的飞机是否都能在它们的油料耗尽之前降落。为了寻找是否存在合法的降落序列,我们可以使用深度优先搜索(DFS)的方法,尝试所有可能的降落顺序。 首先,我们需要理解题目中的条件。每架…

【OceanBase】OBProxy 无状态的理解

SueWakeup 个人主页:SueWakeup 系列专栏:为祖国的科技进步添砖Java 个性签名:保留赤子之心也许是种幸运吧 本文封面由 凯楠📸友情提供 目录 前言 OBProxy 无状态的概述 OBProxy 无状态特性带来的优点 1. 高可用 2. 负载均衡…

盛元广通打造智慧校园实验室安全管理系统

盛元广通智慧校园实验室安全管理系统以安全为重点,构建由学校、二级单位、实验室组成的三级联动的实验室安全多级管理体系、多类用户角色,内置教育部标准检查表,支撑实验室相关业务过程的智慧管理。实现通过PC端/手机移动端开展检查工作、手机…

基于贵州非遗推广小程序的设计与实现14362

基于贵州非遗推广小程序的设计与实现 摘 要 本文设计并实现了一个基于贵州非遗推广的小程序,旨在通过小程序平台推广和展示贵州省非物质文化遗产。该小程序提供了非遗项目介绍、相关活动展示、购买非遗产品等功能。 首先,我们收集了贵州省各个非遗项目的…

惠海 H6912 升压恒流芯片IC 支持2.6-40V升12V24V36V48V60V100V 10A 摄影灯 太阳能灯 UV灯 杀菌灯

1.产品描述 H6912是一款外围电路简洁的宽调光比升压调光LED恒流驱动器,可适用于2.6-40V输入 电压范围的LED恒流照明领域。H6912可以实现高精度的恒流效果,输出电流恒流精度≤士3%,电压工作范围为2.6-40V.可以轻松满足锂电池及中低压的应用需…