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.mzph.cn/diannao/38765.shtml

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

相关文章

onvif 基本概念

media_server、device_server和event_server是三个重要的服务。 1. media_server 功能:media_server服务主要负责处理媒体流相关的请求,包括视频和音频流的传输、控制等。实现:该服务通常使用RTSP(Real Time Streaming Protocol…

API-本地存储

学习目标: 掌握本地存储 学习内容: 本地存储介绍本地存储分类存储复杂数据类型 本地存储介绍: 以前我们页面写的数据一刷新页面就没有了,是不是? 随着互联网的快速发展,基于网页的应用越来越普遍,同时也…

算法基础入门 - 2.栈、队列、链表

文章目录 算法基础入门第二章 栈、队列、链表2.1 队列2.2 栈2.3 纸牌游戏2.4 链表如何建立链表?1.我们需要一个头指针(head)指向链表的初始。链表还没建立时头指针head为空2.建立第一个结点3.设置刚创建的这个结点的数据域(左半)和指针域(右半)4.设置头指针,头指针可方便…

【鸿蒙学习笔记】运算符

官方文档&#xff1a;ArkTS语言介绍 目录标题 赋值运算符比较运算符一元运算符&#xff1a;自增自减运算符二元运算符位运算符逻辑运算符 赋值运算符 运算符解释解释赋值运算符x x y加-x x - y减*x x * y乘/x x / y除%x x % y取余<<x x << y按位左移>&…

问题-小技巧-专业版Win11怎么启动电脑的休眠模式?

专业版Win11怎么启动电脑的休眠模式&#xff1f; powercfg -a powercfg -hibernate on 启用管理员面板依次输入上述命令就可以了。

宠物医院管理系统-计算机毕业设计源码07221

目 录 1 绪论 1.1 选题背景和意义 1.2国内外研究现状 1.3论文结构与章节安排 2 宠物医院管理系统系统分析 2.1 可行性分析 2.1.1技术可行性分析 2.1.2 操作可行性分析 2.1.3 法律可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3 系统用例分…

【python爬虫】总结反反爬的技巧

1. 当请求失败时重复请求 def get_url(url):try:response requests.get(url, timeout10) # 超时设置为10秒except:for i in range(10): # 循环去请求网站response requests.get(url, proxiesproxies, timeout20)if response.status_code 200:breakreturn response2. 适当…

C++ 教程 - 09 多线程处理

文章目录 thread标准库pthread库 thread标准库 C 11 后添加了新的标准线程库 std::thread 类&#xff0c;需引入头文件<thread>声明即创建线程对象&#xff0c;如 thread th1&#xff1b; 调用无参构造&#xff0c;生成一个空的线程对象&#xff1b;thread th(callable&…

VL31N BAPI:GN_DELIVERY_CREATE创建内向交货单同时批次拆分

翻到之前写的测试代码&#xff0c;记录一下&#xff0c;用于创建DN的同时就进行批次拆分&#xff0c;不需要再调用变更的BAPI再去修改一次。 REPORT ZTEST_VL31N_BATCH_SPLIT.DATA:GS_VBSK_I TYPE VBSK, "構造:販売伝票ヘッダINGS…

2023-2024华为ICT大赛中国区 实践赛云赛道 全国总决赛 理论部分真题

Part 1 大数据模块(3题)&#xff1a; 1、以下关于特征选择中的互信息法描述中&#xff0c;理解正确的是哪些?(多选题) A.互信息法是从信息熵的角度分析特征和输出值之间的关系评分 B.在Python工具的sklearn模块中&#xff0c;可使用mutual_info_classif(分类)和mutual_info…

AI智能在Type-C领域的应用

随着科技的飞速发展&#xff0c;Type-C接口凭借其卓越的性能和广泛的应用场景&#xff0c;已成为现代电子设备中不可或缺的一部分。而AI智能技术的兴起&#xff0c;为Type-C领域带来了革命性的变革&#xff0c;推动了其功能的进一步完善和应用领域的拓展。本文将探讨AI智能在Ty…

用技术手段有效应对CC攻击

在网络安全领域&#xff0c;CC攻击&#xff08;Challenge Collapsar&#xff0c;即HTTP Flood攻击的一种&#xff09;是一种常见的分布式拒绝服务&#xff08;DDoS&#xff09;攻击手段&#xff0c;它通过大量合法的HTTP请求耗尽服务器资源&#xff0c;导致正常用户访问缓慢甚至…

【cocos2dx】【c++】【游戏开发】旧题新说,计算两个日期相差几天,在指定的天数弹出相应的弹窗

【cocos2dx】【c】计算两个日期相差几天&#xff0c;在指定的天数弹出相应的弹窗 设备/引擎&#xff1a;Mac&#xff08;11.6&#xff09;/Mac Mini 开发工具&#xff1a;Xcode&#xff08;15.0.1&#xff09; 开发需求&#xff1a;计算两个日期相差几天&#xff0c;在指定的…

中文翻译老挝语只推荐一个神器《老挝语翻译通》App,老挝语口语发音练习,支持老挝文OCR识别提取文字!

出国旅游去探索东南亚的神秘国家&#xff1a;老挝&#xff0c;不会老挝语怎么办&#xff1f;不用怕&#xff0c;下载《老挝语翻译通》App帮助你把中文翻译成老挝语。 功能亮点&#xff1a; 实时翻译&#xff1a;实时把中文翻译成老挝语&#xff0c;老挝语单词或者句子均可均可…

typescript学习回顾(三)

今天继续来分享ts的相关概念&#xff0c;枚举&#xff0c;ts模块化&#xff0c;接口和类型兼容性 ts的扩展类型&#xff1a;类型别名&#xff0c;枚举&#xff0c;接口和类 枚举 基础概念 枚举通常用于约束某个变量的取值范围。当然字面量和联合类型配合使用&#xff0c;也可…

Redis 配置详解

文章目录 Redis 配置详解网络持久化复制安全客户端内存管理延迟释放仅追加模式LUA集群慢指令延迟监控事件通知高级配置主动碎片整理 Redis 配置详解 网络 ########################## NETWORK ########################## bind&#xff1a;指定 Redis 只接收来自于特定 IP 地…

Linux 高级编程——线程控制

线程控制&#xff1a;互斥与同步 概念&#xff1a; 互斥 》在多线程中对临界资源的排他性访问。 互斥机制 》互斥锁 》保证临界资源的 访问控制。 pthread_mutex_t mutex; 互斥锁类型 互斥锁变量 内核对象 框架&#xff1a; 定义互斥锁 》初始化锁 》加…

前端——在本地搭建Vue单页应用

目录 1、安装最新node.js 2、打开命令行窗口 3、进入要保存项目的目录下 4、安装 Vue CLI 5、创建新项目&#xff0c;选择功能 5.1 新建项目 5.2 Please pick a preset 5.3 Check the features needed for your project 5.4 Choose a version of Vue.js 5.5 Use hist…

Android13 串口控制是能wifi adb实现

Android13 串口控制是能wifi adb实现 文章目录 一、前言二、Android 串口控制是能wifi adb实现1、通过Settings属性控制2、通过prop属性控制3、wifi adb 对应的Settings属性和prop属性关系&#xff08;1&#xff09;属性监听&#xff08;2&#xff09;相关代码位置&#xff08;…

优化数据库字段使用位运算-php语言示例

背景&#xff1a;一个会员有三个状态&#xff0c;A、B、C&#xff0c;其中一个人可以为 A、B、C、AB&#xff1b;之前数据表结构加了三个字段is_a、is_b、is_c; 本人实在不想这样粗糙的实现需求&#xff0c;遂决定用位运算优化。 上代码&#xff1a; 位运算可以用来处理状态值…