vue开发06:前端通过webpack配置代理处理跨域问题

1.定义

        在浏览器尝试请求不同源(域名、协议、端口号不同)的资源时,浏览器的同源策略会阻止这种跨域请求。(比如前端端口15500,后端端口5050,前端界面不可以直接调用5050端口)

2.解决方案

        使用前端代理,前端发送请求时发到前端端口上(15500),通过webpack代理到后端端口5050上

3.效果

  • 请求url /api/GetDatas
  • 实际请求url http://localhost:5050/api/GetDatas (F12还是显示请求的是15500)

4.配置方法

        在\config\index.js中修改proxyTable

(其实是本质上修改的是webpack.dev.conf.jsdevServer:proxy变量

proxyTable: {'/api': {   //发送的请求中带有/api的,则执行下面的代理规则target: 'http://localhost:5050', changeOrigin: true, //(允许跨域设置)pathRewrite: {'^/api': '/api' } }
}

实现原理:

  • 1.获取请求路径:/api/GetDatas
  • 2.请求路径右边替换左边(pathRewrite):/api/GetDatas
  • 3.拼接target+请求路径 http://localhost:5050/api/GetDatas

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

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

相关文章

SpringBoot实战:高效获取视频资源

文章目录 前言技术实现SpringBoot项目构建产品选取配置数据采集 号外号外 前言 在短视频行业高速发展的背景下,海量内容数据日益增长,每天都有新的视频、评论、点赞、分享等数据涌现。如何高效、精准地获取并处理这些庞大的数据,已成为各大平…

位图,晶圆MAP 边缘算法

例如这样的一张图: 如果想要求外边缘点,即红色区域,首先遍历所有点位,求出每行每列X轴和Y轴的最大值MAX和最小值MIN。然后再次遍历每个点,判断该点的X值,Y值是否是最大值或者最小值,如果是,那么它就是外边…

【认证授权FAQ】SSL/TLS证书过期导致的CLS认证失败

问题现象 问题分析 属于Agent操作系统的根认证机构过期问题,需要下载CA然后在系统安装。 DigiCert根证书和中间证书将在未来几年过期,一旦证书过期,基于证书颁发的SSL/TLS证书将不再信任,导致网站无法HTTPs访问。需要迁移到新的根…

【安全测试】0基础新手学Web安全测试笔记(一)

文章目录 一、关于账号密码的漏洞二、关于验证码的漏洞三、Burp工具的使用四、渗透测试1. 渗透测试类型2. 脆弱性评估 五、常见的应用安全风险1. 注入2. 失效的身份认证3. 敏感数据泄露4. XML外部实体(XXE)5. 失效的访问控制6. 安全配置错误7. 跨站脚本:(XSS)8. 不安全的反序列…

旅游行业内容管理系统CMS提升网站建设效率与体验

内容概要 在如今快速发展的互联网时代,旅游行业对网站的要求越来越高,内容管理系统(CMS)的应用不可或缺。以 Baklib 为代表的先进CMS可显著提高旅游网站的建设效率与用户体验。为了满足不断变化的市场需求,这些系统通…

数据库安全、分布式数据库、反规范化等新技术(高软19)

系列文章目录 3.7数据库安全、分布式数据库、反规范化等新技术 前言 本节数据库安全、分布式数据库、反规范化等新技术相关概念与技术。 一、数据库 1.数据库安全 2.数据库备份 二、分布式数据库 1.数据库分布 2.数据仓库 3.数据仓库结构 4.商业智能(BI&#xf…

【docker知识】快速找出服务器中占用内存较高的容器

本文由Markdown语法编辑器编辑完成。 1.背景: 近期在处理现场问题,观察服务器时,会遇到某些进程占用较高内存的情况。由于我们的服务,基本上都是以容器的方式在运行,因此就需要找到,到底是哪个容器&#…

【Android开发】华为手机安装包安装失败“应用是非正式版发布版本,当前设备不支持安装”问题解决

问题描述 我们将Debug版本的安装包发送到手机上安装,会发现华为手机有如下情况 解决办法 在文件gradle.properties中粘贴代码: android.injected.testOnlyfalse 最后点击“Sync now”,等待重新加载gradle资源即可 后面我们重新编译Debug安装…

docker 部署nginx,nginx 504

遇到问题 原因: 因为用的docker 部署nginx, docker 应用与服务之间的端口未开放,导致访问不到服务。

【数据结构】(8) 二叉树

一、树形结构 1、什么是树形结构 根节点没有前驱,其它节点只有一个前驱(双亲/父结点)。所有节点可以有 0 ~ 多个后继,即分支(孩子结点)。每个结点作为子树的根节点,这些子树互不相交。 2、关于…

牛客网-小美的加法(C++)

链接:登录—专业IT笔试面试备考平台_牛客网 来源:牛客网 题目描述 小美有一个长度为 n 的数组,她想将这个数组进行求和,即 suma1a2...an。 小美可以使用一次魔法(也可以不使用),将其中一个加号…

瑞芯微开发板/主板Android调试串口配置为普通串口方法 深圳触觉智能科技分享

本文介绍瑞芯微开发板/主板Android调试串口配置为普通串口方法,不同板型找到对应文件修改,修改的方法相通。触觉智能RK3562开发板演示,搭载4核A53处理器,主频高达2.0GHz;内置独立1Tops算力NPU,可应用于物联…

MongoDB 7 分片副本集升级方案详解(下)

#作者:任少近 文章目录 1.4 分片升级1.5 升级shard11.6 升级shard2,shard31.7 升级mongos1.8重新启用负载均衡器1.9 推荐MongoDB Compass来验证数据 2 注意事项: 1.4 分片升级 使用“滚动”升级从 MongoDB 7.0 升级到 8.0,即在其他成员可用…

【redis】数据类型之bitmaps

Redis的Bitmaps是一种基于字符串的数据结构,用于处理位级别的操作。虽然Bitmaps在Redis中并不是一种独立的数据类型,而是基于字符串实现的,但它们提供了高效的位操作功能,适用于需要处理大量布尔值或二进制数据的场景。 基本概念…

mysql8.0使用MGR实现高可用与利用MySQL Router构建读写分离MGR集群

MGR是MySQL Group Replication的缩写,即MySQL组复制。 在以往,我们一般是利用MySQL的主从复制或半同步复制来提供高可用解决方案,但这存在以下几个比较严重的问题: 主从复制间容易发生复制延迟,尤其是在5.6以前的版本…

【IC】AI处理器核心--第二部分 用于处理 DNN 的硬件设计

第 II 部分 用于处理 DNN 的硬件设计 第 3 章 关键指标和设计目标 在过去的几年里,对 DNN 的高效处理进行了大量研究。因此,讨论在比较和评估不同设计和拟议技术的优缺点时应考虑的关键指标非常重要,这些指标应纳入设计考虑中。虽然效率通常…

Flutter Gradle 命令式插件正式移除,你迁移旧版 Gradle 配置了吗?

在 Flutter 3.29 版本里官方正式移除了 Flutter Gradle Apply 插件,其实该插件自 3.19 起已被弃用,同时 Flutter 团队后续也打算把 Flutter Gradle 从 Groovy 转换为 Kotlin,并将其迁移到使用 AGP(Android Gradle Plugin&#xff…

C++类和对象进阶:运算符重载深度详解

C类和对象进阶:运算符重载 前言引入运算符重载定义语法注意事项重载为全局函数重载为成员函数运算符重载的本质 默认赋值运算符重载(默认成员函数)编译器自己生成的赋值运算符重载函数需要自己实现的场景总结默认赋值运算符重载 拷贝构造函数和赋值重载的区分验证 总…

three.js 使用geojson ,实现中国地图区域,边缘流动效果

three.js 使用geojson ,实现中国地图区域,边缘流动效果 在线链接:https://threehub.cn/#/codeMirror?navigationThreeJS&classifyexpand&idgeoBorder 国内站点预览:http://threehub.cn github地址: https://github.co…

PortSwigger——WebSockets vulnerabilities

文章目录 一、WebSockets二、Lab: Manipulating WebSocket messages to exploit vulnerabilities三、Lab: Manipulating the WebSocket handshake to exploit vulnerabilities四、Using cross-site WebSockets to exploit vulnerabilities4.1 跨站WebSocket劫持(cro…