vue项目中使用http-proxy-middleware解决前端开发中跨域的问题

2023-11-10

使用方式:

1、安装

npm install http-proxy-middleware --save-dev

2、使用

  • 一般的使用
    新建js文件,在此小编命名为proxy.js
const proxy = require("http-proxy-middleware");

module.exports = {
   
  entry:{
   
    index:"./index.js"
  },
  output:{
   

  },
  devServer:{
   
    proxy:{
   
      '^/api/':{
   // api表示当前项目请求的key
        target:"https://xxxxx/api/",// 代理服务器路径
        changeOrigin:true// 默认false,是否需要改变原始主机头为目标URL
      }
    }
  }
}
  • 通过express开服务器进行代理
    新建js文件,小编命名为server.js
// 引用依赖
const express = require("express");
const app = express();
const proxy = require("http-proxy-middleware");

// proxy 中间件的选择项
const options = {
   
  target:"https://jsonplaceholder.typicode.com/posts/",// 目标服务器地址
  changeOrigin:true,// 默认false,是否需要改变原始主机头为目标URL
  ws:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue项目中使用http-proxy-middleware解决前端开发中跨域的问题 的相关文章

随机推荐

  • 掌握Python的X篇_37_类的实例化、类方法

    上篇我们已经学习了python中的类 并且学习到可以通过class关键字定义类 而类的最基本特性就是它是一个名称空间 本篇将会学习类的实例化 文章目录 1 类的实例化 1 1 init 函数 1 2 实例化流程 2 类方法与成员 1 类的实
  • Sql Server 日期查询

    当前月 USE DBName Go Use Database Declare Variables DECLARE ReportGenerationDate DATE DECLARE ReportMonth INT DECLARE Repor
  • freertos实用指南_大数据及其掌握方法(实用指南)

    freertos实用指南 随着技术的兴起 数十年来 来自人 企业和机器的数字信息呈指数增长 数据现在被认为是21世纪的石油 几十年前产生兆字节数据的组织现在每小时产生PB级新数据 例如 全球超过33亿智能手机用户 大数据介绍 每个人都在数以
  • SpringBoot单元测试之mock静态方法

    The article summary 1 为什么要对静态方法mock 2 如何使用 powermock 对静态方法 mock 2 1 添加依赖 2 2 编写测试类 2 3 需要注意的问题 1 为什么要对静态方法mock mockito库并
  • 学术答辩PPT模板分享

    130套学术答辩PPT模板分享 链接 https pan baidu com s 1S7YbRlzOeyqwdc9ay5 DYA 提取码 irxg 动态PPT 49套 静态PPT 34套 答辩PPT 24套 精选动态PPT 21套
  • 如何做口碑营销?企业实施网络口碑营销的技巧

    随着互联网的发展 互联网早期的红利期已经完结 现在的互联网行业是用户开发成本越来越高 电子商务的转化率也越来越低 为了降低用户的开发成本和提高转化率 企业一定要重视口碑营销 口碑营销是靠口碑自动去传播 老客户带来新客户的营销模式 成本极低效
  • 10.BIO、NIO、AIO、多路复用IO的区别(图解)

    学习之前 我们先来了解一下IO模型 同步阻塞IO Blocking IO 即传统的IO模型 同步非阻塞IO Non blocking IO 默认创建的socket都是阻塞的 非阻塞IO要求socket被设置为NONBLOCK 注意这里所说的
  • ansible 添加 cron 任务

    找到相应的role 假设以storm nimbus为例 将要完成的任务脚本放在files目录下 例如 vim roles storm nimbus files storm recovery bin bash service storm me
  • KMP算法-超级无敌详细(嚼碎了喂你)

    提示 文章写完后 目录可以自动生成 如何生成可参考右边的帮助文档 文章目录 前言 一 朴素的模式匹配算法 BF暴力匹配算法 二 KMP算法 1 next 数组求法 2 next j 数组代码分析 三 计算出与主串匹配的位置 总结 前言 提示
  • vue3导入element-plus的index.css路径问题

    在做vue3项目的过程中 使用了element plus这个开源组件库 在引入index css这个样式的时候出现了一个问题 使用了之前的 import element plus lib theme chalk index css 导入时路
  • js 三个点 “...“ 省略号的语法

    js 三个点 省略号的语法 概念 是ES6的新语法 该写法在js的不同语境中有不同的解释 可解释为展开语法 Spread syntax 和剩余语法 Rest syntax 写法相同 但作用却是完全相反的 使用时要注意区分 本文主要参考MDN
  • linux 执行 mysql存储过程_mysql 存储过程 执行

    mysql存储过程 mysql存储过程 存储过程 Stored Procedure 是在大型数据库系统中 一组为了完成特定功能的SQL 语句集 经编译后存储 在数据库中 用户通过指定存储过程的名字并给出参数 如果该存储过程带有参数 来执行它
  • 期刊分类—CSSCI、A类、B类、C类、核心期刊的区别

    文章与视频资源多平台更新 微信公众号 知乎 B站 头条 AI研习图书馆 深度学习 大数据 IT编程知识与资源分享 欢迎关注 共同进步 CSSCI A类 B类 C类 核心期刊的区别如下 一 创刊单位不同 1 cssci 是南大核心 南京大学评
  • c++变量模板总结

    一 定义 泛化 全特化 偏特化 使用方法 include
  • 几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍

    富文本编辑器 富文本编辑器 Rich Text Editor RTE 是一种可内嵌于浏览器 所见即所得的文本编辑器 它提供类似于Office Word 的编辑功能 方便那些不太懂HTML用户使用 富文本编辑器的应用非常广泛 它的历史与图文网
  • CMOS图像传感器OV7725数据手册

    下载地址 阿里云盘分享https www aliyundrive com s RuxT3cpHpiK
  • windwos、linux在虚拟机中共享文件

    因为工作的关系 目前的工作机器是ubuntu桌面版 因为有时需要用到windows下的软件 因此装了个虚拟机virtualbox 在里面装个了个windows 为了能够让两个机器相互访问 需要设置一个共享文件夹 在网上找了一圈 基本上都是w
  • 【char类型转换】

    文章目录 前言 经典例题 典例1 变式1 典例2 总结 前言 今天我们一起来了解一下关于整形提升和进制转换的问题 经典例题 典例1 计算下面程序打印的结果 include
  • 牛客网算法教程-中级篇-第一章

    文章目录 学习目标 学习内容 学习时间 学习产出 1 旋转词 模拟 2 旋转矩阵 模拟 3 数轴覆盖 贪心 4 1 完整字符串1 括号字符串的有效性 栈 4 2 完整字符串2 缺失的括号 栈 4 3 完整字符串3 最长合法括号子串 栈 5
  • vue项目中使用http-proxy-middleware解决前端开发中跨域的问题

    使用方式 1 安装 npm install http proxy middleware save dev 2 使用 一般的使用 新建js文件 在此小编命名为proxy js const proxy require http proxy mi