Angular反向代理实现前端跨域

2023-11-15

angular2+提供了反向代理可以直接在前端代码中就可以实现跨域。具体的方法如下:

在angular项目根目录新建了个proxy.conf.json配置文件 代码示例如下:

{
    "/api": { // 将http://localhost:4200/api通过代理实际访问: http://www.hy.com/apis/api
        "target": "http://www.hy.com/apis/", //【必须】:需要跨域的服务器地址
        "logLevel": "debug", //调试用,如果代理成功,在命令行工具中会显示跨域的地址
        "changeOrigin": true, //如果不是代理本机就【必须】设变true,否则可以不设置
        "pathRewrite": { // 修改代理接口的路径地址
            "^/api": ""
        }
    },
    "/": { // 访问http://localhost:4200/  实际访问http://www.hy.com/apis/
        "target":"http://www.hy.com/apis"
    }
}

配置angular项目根目录下的package.json文件,或者cmd直接运行:ng serve -o --proxy-config proxy.cong.json,如下图:

angular.json反向代理

npm start

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular反向代理实现前端跨域 的相关文章

随机推荐

  • 你在用什么写用例

    这段时间用例评审项目组三个成员 有用excel的 有用xmind的 有用禅道的 而我关于用例用到xmind 后来用excel 后来用禅道一直到现在 xmind是思路分析和整理的工具 在最开始做测试的前3年可以说很依赖这款工具 后来 如果要做
  • QT的学习

    1 Test brower 文本浏览器 2 菜单栏窗体里面有预览功能 3 窗口的布局 4 信号与槽 其实就是时间处理函数 类的成员函数 2019 5 27 学习了 QFileDialog 类 就是选择文件 并且把文件名显示到line edi
  • 编写软件测试文档实验报告,黑盒测试软件测试实验报告.doc

    黑盒测试软件测试实验报告 doc 软件测试与质量课程实验报告 实验2 实验2 黑盒测试法实验 姓名院系 学号 任课教师 实验指导教师 实验地点 实验吋间 实验目的 系统地学习和理解黑盒测试的 本概念 原理 熟悉和掌握等价类划分法 边界值分析
  • bootstrap 动态添加js 页面渲染_给Shopify页面添加动态背景特效教程(傻瓜式操作模板)...

    第一种特效 多彩动态气泡向中心焦点聚合js动画 操作 复制代码如下代码 然后打开页面 切换到添加代码模式 然后复制到内容的最顶部 如下图所示
  • 【STM32技巧】使用STM32 HAL库的硬件I2C驱动RX8025T实时时钟芯片

    基础配置 使用单片机APM32F103RBT6 使用外设I2C1 PB7 SDA 使用外设I2C1 PB6 SCK STM32CUBEMX 版本5 6 配置如下 i2c c文件 File Name I2C c Description Thi
  • 目标检测中图片预处理之图片大小分析

    前言 很多做目标检测的新手 拿到数据集就迫不及待想找一个算法来跑它 内心先爽一把 包括我在内也是这样 其实样的做法不合理 我们应该先对数据集进行一些分析 找出数据集的特点 有针对性的进行检测 首先要关注的是图片大小 这个相当重要 假设测试文
  • 01Nginx源码分析之初探Nginx架构

    01Nginx源码分析之初探Nginx架构 注 接下来的源码分析我都是参考以下这位博主的 但是有些地方不对的我会修改 毕竟每个人理解不一样 并且版本为nginx stable 1 18 自娱自乐的代码人 1 初探Nginx架构 第一篇没什么
  • 深度学习之手写数字识别

    当我们开始学习编程的时候 第一件事往往是学习打印 Hello World 就好比编程入门有Hello World 机器学习入门有MNIST MNIST是一个入门级的计算机视觉数据集 它包含各种手写数字图片 它也包含每一张图片对应的标签 告诉
  • 【Python爬虫】urllib模块,User-agent

    通过 rullib模块 爬取html内容 文章目录 1 urllib模块分类 2 方法使用案例 3 重构User Agent 1 urllib模块分类 urllib request 请求模块 用于打开和读取 URL urllib error
  • 《宫本武藏》

    吉川英治 宫本武藏 地之卷 水之卷 火之卷 风之卷 http book sina com cn nzt his gongbenwuzang 空 二天之卷 http lianzai book qq com book 3746 缺少最后的 圆明
  • RealityCapture场景建模笔记

    Unity Photogrammetry Workflow 5 2 8 着色和贴纹理 Colorize or Texture 5 2 10 网格输出 Mesh export 输出附有颜色信息的Mesh 点云 5 2 8 着色和贴纹理 Col
  • kvm内存管理

    qemu kvm 进程很像一个普通的linux程序 它通过通常的malloc和mmap调用来申请内存 如果一个客户系统想使用1G物理内存 qemu kvm将会做一个malloc 1 lt lt 30 调用 在主机上申请1G的虚拟地址 然而
  • 固定阈值threshold Expected cv::UMat for argument 'mat'

    出错的原因是左边少了一个变量名 你的写法可能是这样 正确的应该是 加上那个变量名 后面用不着 但这里不加会报错 就好了
  • 6-JS的Fetch 跨域问题

    跨域访问 只要协议 主机 端口之一不同 就不同源 例如 http localhost 7070 a 和 https localhost 7070 b 就不同源 同源检查是浏览器的行为 而且只针对 fetch xhr 请求 如果是其它客户端
  • python常见方法汇总

    排序方法 sorted 对列表排序 sorted list 默认升序 对字典排序 def sorted by value dict data reverse True 字典按值降序排序 param dict data dict数据 reve
  • mysql error 1093(HY000) You can‘t specify target table ‘xx‘ for update in FROM clause

    错误代码 update sc set grade grade 1 1 where sno in select sno from sc group by sno having avg grade gt 75 报错详情 You can t sp
  • element UI的使用方法

    1 找官网 http element eleme io zh CN component quickstart 2 安装 cnpm i element ui S S表示 save 3 引入element UI的css 和 插件 import
  • MongoDB连接超时

    在java连接MongoDB时出现了如下连接超时的错误 解决如下 在MongoDB的配置文件中添加了bind ip 0 0 0 0表示任意地址都可以访问
  • WIFI探针原理

    WIFI 探针原理 WIFI 是基于IEEE802 11a b g n 协议 在标准协议中 定义了AP 无线接入点 和STA 站或客户端 的两种工作模式 协议中规定了BEACON ACK DATA PROBE 等多种无线数据帧类型 在站连接
  • Angular反向代理实现前端跨域

    angular2 提供了反向代理可以直接在前端代码中就可以实现跨域 具体的方法如下 在angular项目根目录新建了个proxy conf json配置文件 代码示例如下 api 将http localhost 4200 api通过代理实际