Vue3 proxy跨域代理

news2024/11/17 15:28:13

一、跨域问题 

        假设vue项目的运行地址为:http://localhost:5173,·此时我们想要调用后端服务的rest api,而后端接口暴露的地址为:https://192.168.1.1:8080/user

        可以发现前端服务与后端服务的域名是不同的,默认情况下,即使运行前后端服务的两台主机在同一网段内,前端应用是无法从后端服务成功请求到数据的。

        对于这种跨域问题,有两种解决方法,一是让后端服务主动开启CORS跨域资源共享;二是在前端配置一下proxy代理。既然前后端主机在同一网段内,那本身是可以相互ping通的,配置proxy代理相当于代理服务器代替前端向后端应用发送请求,然后把请求到的数据转交给前端应用。

        关于跨域问题,感觉还涉及到很多协议问题等等知识,有时间再研究吧。

二、Vue3配置proxy代理

        找到Vue3项目中的vite.config.ts/vite.config.js文件,新增如下内容

  // 配置跨域请求的代理服务器
  server: {
    proxy: {
      "/api": {
        target: "http://192.168.1.1:8080",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },

         配置好后,比如我们想要请求http://192.168.1.1:8080/user/getNum这个api的资源,那按照如下格式写代码就可以了:

const reponse = await axios.get("/api/user/getNum");

根据vite.config.ts/vite.config.js中的配置,代理会自动帮我们把请求url中的/api替换成http://192.168.1.1:8080,最终代理会把成功请求到的数据返回给Vue前端。

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

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

相关文章

C语言 | Leetcode C语言题解之第445题两数相加II

题目: 题解: struct ListNode* addTwoNumbers(struct ListNode* l1, struct ListNode* l2){int stack1[100];int stack2[100];int top1 0;int top2 0;int carry 0;int sum 0;struct ListNode* temp NULL;struct ListNode* head NULL;while (l1) {…

基于ssm大学生自主学习网站的设计与实现

文未可获取一份本项目的java源码和数据库参考。 1、毕业论文(设计)的背景及意义: (1)研究背景 目前,因特网是世界上最大的计算机互联网络,它通过网络设备将世界各地互相独立的不同规模的局域…

五、Drf权限组件

五、权限组件 权限组件=[权限类,权限类,权限类…] 执行所有权限类的has_permission方法,通过返回True,不通过返回False 默认情况下,所有的权限类都通过,才返回True 5.1简单应用权限组件 #ext.per class MyPermission1(BasePermission):def has_permission(self, requ…

Redis篇(Redis原理 - 网络模型)

目录 一、用户空间和内核态空间 二、阻塞IO 三、非阻塞IO 四、IO多路复用 五、IO多路复用-select方式 六、IO多路复用模型-poll模式 七、IO多路复用模型-epoll函数 八、网络模型-epoll中的ET和LT 九、网络模型-基于epoll的服务器端流程 十、网络模型-信号驱动 异步IO…

Linux安装RabbitMQ安装

1. RabbitMQ介绍 1.1 RabbitMQ关键特性 异步消息传递:允许应用程序在不直接进行网络调用的情况下交换消息。 可靠性:支持消息持久化,确保消息不会在系统故障时丢失。 灵活的路由:支持多种路由选项,包括直接、主题、…

7--苍穹外卖-SpringBoot项目中套餐管理 详解(一)

前言 目录 新增套餐 需求分析和设计 代码开发 根据分类id查询菜品 Controller层 Service层 ServiceImpl层 Mapper层 DishMapper.xml 新增套餐 实体类 mapper层 Service层 ServiceImpl层 Mapper层 SetmealMapper.xml setmealDishMapper.xml 套餐分页查询 需求分…

网络协议详解--IPv6

IPv6产生背景 (1)地址空间的耗尽:因特网呈指数级发展,导致IPv4地址空间几乎耗尽。虽然采用了子网划分、CIDR和NAT地址转换技术,但这没有从根源解决地址耗尽的问题 (2)IP层安全需求的增长&#x…

【拥抱AIGC】通义灵码策略配置

通义灵码企业级策配置支持智能问答、行间代码生成安全过滤器相关策略配置。 适用版本 企业标准版、企业专属版 通义灵码管理员、组织内全局管理员(专属版)在通义灵码控制台的策略配置中进行安全过滤器的配置,开启后,企业内开发…

第十一届蓝桥杯嵌入式省赛程序设计题解析(基于HAL库)(大学组第二套)

一.题目分析 (1).题目 (2).题目分析 1..按键功能分析 a. B1界面切换 b. B2每次按下,PA6手动模式占空比参数增加10% c. B3每次按下,PA7手动模式占空比参数增加10% d. B4模式切换 f. 在数据显示界面下…

JAVA姓氏头像情侣头像家庭头像签名头像谐音顽埂头像设计小程序头像大全系统小程序源码

姓氏头像到谐音梗,打造你的专属头像大全系统 🎨✨ 👨‍👩‍👧‍👦 家庭头像:记录温馨瞬间 在这个充满爱的时代,用一张家庭头像来记录你和家人的美好瞬间吧!我们的“姓氏…

Linux 进程状态、僵尸进程与孤儿进程

目录 0.前言 1. 进程状态 1.1 定义 1.2 常见进程 2.僵尸进程 2.1 定义 2.2 示例 2.3 僵尸进程的危害与防止方法 3. 孤儿进程 3.1 介绍 3.2 示例 4.小结 (图像由AI生成) 0.前言 在上一篇文章中,我们介绍了进程的基本概念、进程控制块&#…

Python Flask 和 Django 的区别与适用场景

Flask 和 Django 的异同(结合代码解释) Flask 和 Django 是两个流行的 Python Web 框架。尽管它们都是用于构建 Web 应用程序的强大工具,但它们的设计哲学、功能和用法有很大的区别。通过代码示例,可以更直观地理解 Flask 和 Dja…

基础岛第1关:书生大模型全链路开源体系

了解书生浦语大模型体系:书生浦语 InternLM2.5 系列模型: 卓越的推理性能:在数学推理方面取得了同量级模型最优精度,超越了 Llama3 和 Gemma2-9B。有效支持百万字超长上下文:模型在 1 百万字长输入中几乎完美地实现长…

一文讲透大语言模型构建流程

最近已有不少大厂都在秋招宣讲了,也有一些在 Offer 发放阶段。 节前,我们邀请了一些互联网大厂朋友、今年参加社招和校招面试的同学。 针对新手如何入门算法岗、该如何准备面试攻略、面试常考点、大模型技术趋势、算法项目落地经验分享等热门话题进行了…

用友U8-CRM fillbacksettingedit.php SQL注入复现

0x01 产品描述: 用友U8-CRM是企业利用信息技术,是一项商业策略,它通过依据市场细分组织企业资源、培养以客户为中心的经营行为、执行以客户为中心的业务流程等手段来优化企业的客户满意度和获利能力。 0x02 漏洞描述: 用友 U8 C…

VMware Aria Operations for Logs 8.18 发布,新增功能概览

VMware Aria Operations for Logs 8.18 - 集中式日志管理 请访问原文链接:https://sysin.org/blog/vmware-aria-operations-for-logs/,查看最新版。原创作品,转载请保留出处。 作者主页:sysin.org 集中式日志管理 VMware Aria …

web开发(1)-基础

这是对b站课程的总结,后续可能会继续更 01 前后端分离介绍_哔哩哔哩_bilibili01 前后端分离介绍是Web应用开发-后端基础-基于Springboot框架的第1集视频,该合集共计29集,视频收藏或关注UP主,及时了解更多相关视频内容。https://w…

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-01

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-01 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-01目录1. Beyond Text-to-Text: An Overview of Multimodal and Generative Artificial Intelligence for Education Using Topi…

第二弹:面向对象编程中的类与对象

文章目录 面向对象编程中的类与对象1. 类与对象的定义1.1 类和对象的概念1.2 类的基本定义 2. 类的封装2.1 类的封装语法2.2 类成员访问权限2.3 struct和class的区别2.4 类封装与成员函数定义分离 3. 类对象的创建与销毁3.1 静态与动态对象的创建3.2 对象的销毁 4. 构造函数和析…

云服务器部署k8s需要什么配置?

云服务器部署k8s需要什么配置?云服务器部署K8s需要至少2核CPU、4GB内存、50GBSSD存储的主节点用于管理集群,工作节点建议至少2核CPU、2GB内存、20GBSSD。还需安装Docker,选择兼容的Kubernetes版本,配置网络插件,以及确…