VUE3解决跨域问题

news2024/11/17 2:44:36

本文基于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.coloradmin.cn/o/1883058.html

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

相关文章

API-Window对象

学习目标: 掌握Window对象 学习内容: BOM(浏览器对象模型)定时器-延时函数JS执行机制location对象navigation对象history对象 BOM(浏览器对象模型): BOM是浏览器对象模型。 window对象是一个全…

每个App下载收费3.88元,苹果太强势被开2800亿罚单

刚刚开完 WWDC2024 大会,苹果就被欧盟找上了麻烦。 欧盟认为苹果涉嫌违反涉嫌违反《数字市场法案》(Digital Markets Act),造成垄断。 来源:欧盟委员会 明确指出苹果在 Apple Store 里面对开发者的限制不合理。 在最…

栈的概念和实现

1.栈的概念及结构 栈:一种特殊的线性表,其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶,另一端称为栈底。栈中的数据元素遵守后进先出LIFO(Last In First Out)的原则。 压栈&…

侯捷C++面向对象高级编程(上)-6-三大函数:拷贝构造、拷贝复制、析构

1. 2.三个特殊函数 3.构造函数和析构函数 4.浅拷贝(系统默认仅把指针拷贝过去) 5.拷贝构造函数(深拷贝,拷贝的内容,重写string函数) 6.拷贝赋值

阿里云 CosyVoice 语音合成大模型 API 实践

前言 最近大模型这么火,就想着玩一下,作为非 AI 从业者,最好的方式就是调用云服务的 API 来构建自己的 AI 应用。首选当然是国外的 ChatGPT API,但是说实话那个玩意有点贵,而且最近国内也被封禁不让调用了&#xff0c…

诊所运营效率提升方法有哪些?

随着医疗行业的快速发展和市场竞争的加剧,诊所运营效率的提升成为了众多医疗机构关注的焦点。高效的诊所运营不仅能够提升患者的就医体验,还能帮助诊所实现可持续发展。那么,诊所运营效率提升的方法有哪些呢? 1、优化管理流程 诊…

项目经验-不同行业、不同风格的网站设计

网站UI设计的首要考虑点是布局与导航。合理的布局能够确保信息清晰呈现,使用户能够快速定位所需内容。同时,简洁明了的导航设计能够引导用户流畅浏览,减少迷失感。通过精心设计的布局和导航,可以提升用户体验,增强用户…

一、安全完善度等级SIL(Safety Integrity Level)介绍

目录 一、背景 二、定义 2.1 相关概念介绍如下: 2.2 扩展 2.3 注意事项 一、背景 在轨道交通行业中,安全完善度等级(SIL,Safety Integrity Level)是一个至关重要的概念,它用于评估安全相关系统&#x…

vue3.0 + vant实现下拉刷新上拉加载

在vue中使用vant组件库有个van-pull-refresh下拉组件,配合van-list列表组件实现页面的下拉刷新和上拉加载,原理简单,适用场景在列表页面内容展示。 下拉刷新 PullRefresh 实现下拉刷新的效果。 PullRefresh组件中的searchRefreshing属性&…

Open3D Ransac点云配准算法(粗配准)

目录 一、概述 1.1简介 1.2RANSAC在点云粗配准中的应用步骤 二、代码实现 2.1关键函数 2.2完整代码 2.3代码解析 2.3.1计算FPFH 1. 法线估计 2. 计算FPFH特征 2.3.2 全局配准 1.函数:execute_global_registration 2.距离阈值 3.registration_ransac_b…

为什么企业应用开发,c++干不过java?

在开始前刚好我有一些资料,是我根据网友给的问题精心整理了一份「c的资料从专业入门到高级教程」, 点个关注在评论区回复“888”之后私信回复“888”,全部无偿共享给大家!!! C/C这种东西,根本…

面向阿克曼移动机器人(自行车模型)的LQR(最优二次型调节器)的路径跟踪方法

线性二次调节器(Linear Quadratic Regulator,LQR)是针对线性系统的最优控制方法。LQR 方法标准的求解体系是在考虑到损耗尽可能小的情况下, 以尽量小的代价平衡其他状态分量。一般情况下,线性系统在LQR 控制方法中用状态空间方程描…

Docker 一篇到位

目录 01. Docker使用导航 02. Build Share Run 样例 03. 理解容器 04. 安装 Docker 05. Docker 样例(常见命令使用) 下载镜像 启动容器 修改页面 保存镜像 docker commit docker save docker load 分享社区 docker login docker tag do…

浅聊JavaScript中的栈(stack)

前言 这篇文章结合leetcode题目讲解一下栈这种结构 第20题:20. 有效的括号 - 力扣(LeetCode) 第LCR-147题LCR 147. 最小栈 - 力扣(LeetCode) 栈(stack) 在讲解题目之前,我们先来…

天池大赛Higress插件官方demo详细部署+调试

天池大赛Higress插件官方demo详细部署调试 契机 ⚙ 使用Higress AI网关优化AI调用成本。就是基于向量召回相似问题的缓存,降低LLM API调用成本。就是开发一个网关插件做QA缓存嘛。前文已经成功复现了hello-world插件,这次结合官方提供的AI-Cache插件自…

二叉树遍历练习题

2.已知某二叉树的前序遍历序列为5 7 4 9 6 2 1,中序遍历序列为4 7 5 6 9 1 2,则其后序遍历序列为( ) A.4 2 5 7 6 9 1 B.4 2 7 5 6 9 1 C.4 7 6 1 2 9 5 D.4 7 2 9 5 6 1 答案:C 解析: 通过前序遍历找…

失眠焦虑植物神经紊乱应该怎么改善饮食?

在快节奏的现代社会中,越来越多的人受到植物神经紊乱的困扰,尤其是失眠、焦虑、胸闷气短等症状频发。这些症状不仅影响日常生活和工作效率,还可能引发一系列健康问题。今天,我们就来谈谈如何通过调整饮食来改善这些症状。 饮食调整…

Java [ 基础 ] 方法引用 ✨

✨探索Java基础✨ Java基础:方法引用 方法引用是Java 8中引入的一种新特性,它使得代码更加简洁和易读。方法引用提供了一种可以直接引用已有方法作为Lambda表达式的替代方案。本文将深入介绍方法引用的基本概念、使用方法、具体实例及其在实际开发中的…

HCIA4.26-5.10

OSPF ——开放式最短路径优先协议 无类别链路状态IGP动态路由协议 距离矢量协议 运行距离矢量协议的路由器会周期性的泛洪自己的路由表,通过路由之间的交互,每台路由器都从相邻的路由器学习到路由条目,随后加载进自己的路由表中。对于网络…

简单分享下python封装

目录: 一、简介,什么是封装 二、封装的优点与好处 三、封装的示例 四、可封装的场景 一、简介,什么是封装 通俗理解:封装,简而言之,就是把数据(变量)和操作这些数据的方法&#xff0…