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,一经查实,立即删除!

相关文章

API-本地存储

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

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

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

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

专业版Win11怎么启动电脑的休眠模式? 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 系统用例分…

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

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

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

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

typescript学习回顾(三)

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

Linux 高级编程——线程控制

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

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

目录 1、安装最新node.js 2、打开命令行窗口 3、进入要保存项目的目录下 4、安装 Vue CLI 5、创建新项目,选择功能 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…

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

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

探索SOLIDWORKS 2024设计增强功能

随着技术的不断进步和市场的日益竞争,工程设计和制造行业对于快捷、准确和创新的工具需求日益增长。SOLIDWORKS作为3D CAD设计软件,一直致力于为用户提供更强大、更便捷的设计工具。SOLIDWORKS 2024的发布,再次证明了其在设计增强功能方面的持…

使用 Amazon Bedrock Converse API 简化大语言模型交互

本文将介绍如何使用 Amazon Bedrock 最新推出的 Converse API,来简化与各种大型语言模型的交互。该 API 提供了一致的接口,可以无缝调用各种大型模型,从而消除了需要自己编写复杂辅助功能函数的重复性工作。文中示例将展示它相比于以前针对每…

批量文件名修改软件:一键解决同一编码多型号文件分类与命名难题,高效管理文件

在数字化时代,图片文件已经成为我们工作中不可或缺的一部分。然而,当面对成百上千个同一编码下不同型号的图片文件时,如何快速、准确地进行分类和命名,成为了许多职场人士头疼的问题。现在,我们为您带来了一款神奇的批…

MyBatisPlus 基础数据表的增删改查 入门 简单查询

MyBatisPlus MyBatisPlus(简称MP)是一个基于MyBatis的增强工具库,简化了MyBatis的开发,提供了很多实用的功能和特性,如自动生成SQL、通用CRUD操作、分页插件、条件构造器、代码生成器等。它不仅简化了开发过程&#x…

优盘有盘符显示0字节:故障解析与数据恢复策略

一、优盘有盘符显示0字节现象描述 在使用优盘的过程中,我们有时会遇到一种令人困惑的情况:插入优盘后,电脑能正常识别到优盘的盘符,但当我们尝试访问其中的数据时,却发现优盘的容量显示为0字节,无法读取或…

Sui创始团队在竞速环节中的快问快答

在Sui Basecamp活动期间,Sui区块链的最初贡献者在Oracle红牛赛车模拟器上展示了他们的技术能力,在驾驶圈时回答了有关Sui的问题。 Evan Cheng(又名Revvin’ Evan)在解释Mysticeti创下区块链最终性记录的同时保持着他的驾驶线路。…

Java | Leetcode Java题解之第200题岛屿数量

题目&#xff1a; 题解&#xff1a; class Solution {void dfs(char[][] grid, int r, int c) {int nr grid.length;int nc grid[0].length;if (r < 0 || c < 0 || r > nr || c > nc || grid[r][c] 0) {return;}grid[r][c] 0;dfs(grid, r - 1, c);dfs(grid, r…

go Channel原理 (三)

Channel 设计原理 不要通过共享内存的方式进行通信&#xff0c;而是应该通过通信的方式共享内存。 在主流编程语言中&#xff0c;多个线程传递数据的方式一般都是共享内存。 Go 可以使用共享内存加互斥锁进行通信&#xff0c;同时也提供了一种不同的并发模型&#xff0c;即通…

mysql8.0.19安装zip版本

下载地址https://downloads.mysql.com/archives/community/ 下载版本 下载后解压&#xff0c;不包括data 和my.ini文件。其中data 文件是自动生成的【mysqld --initialize --console】&#xff0c;my.ini需要自己编写设置。 新建my.ini文件 需要自己设置 basedirG:\soft\mysql…

内网服务器时间校正

新购买的云服务器发现内网机器和可以访问外网的机器时间慢了三分钟&#xff0c;导致有些访问会报错&#xff0c;那么我们配置一下ntp校正一下时间。外网配置起来比较简单&#xff0c;直接下载ntp执行校正命令即可。 比当前时间慢了三分钟 注意当前服务器是可以访问外网的机器这…