美文网首页
前端跨域调试工具 http-proxy-middleware

前端跨域调试工具 http-proxy-middleware

作者: 想溜了的蜗牛 | 来源:发表于2021-02-20 09:51 被阅读0次

http-proxy-middleware 这个东西非常有用, 当你后台服务器没有允许跨域时, 用它,可以让你顺滑访问任何你可要的API.

本篇主要记录下同时访问多个后台的情况,现在多用微服务,跨多个服务器地址调用是个正常情况。

代码如下:

const { proxy } = require("http-proxy-middleware");

if (process.env.NODE_ENV === "development") {
  module.exports = function (app) {
    // Dev server
    app.use(proxy('/api', {target: "http://abc:8080"}));
    // third api (report)
    app.use(proxy('/reports', {target: "http://xyz:9000"}));
    // mock servers
    app.use(proxy(["/user", "/myclients"], { target: "http://localhost:3005" }));
  };
}

refer:Set up proxy to work with multiple APIs in create react app

相关文章

  • 前端跨域调试工具 http-proxy-middleware

    http-proxy-middleware[https://github.com/chimurai/http-pr...

  • 浏览器跨域的那些事

    整理中 目标: 了解跨域 解决跨域 服务器配置跨域(java, nginx) 前端调试时配置解决跨域 一、什么是跨...

  • react解决跨域,axios配置,请求封装

    yarn add http-proxy-middleware安装跨域包 在src目录下创建 setupProxy....

  • 关于设置env等环境变量的思考

    1、如何处理跨域后台处理跨域前端处理跨域浏览器处理跨域 前端本地处理跨域:代理线上跨域的处理方式:Nginx反向代...

  • C# Web直接上传视频或者文件到OSS

    代码 解决本地调试跨域问题 设置跨域规则:找到OSS存储——Bucket列表——基础设置——跨域访问——设置 暴露...

  • vue中的跨域解决方法

    vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'A...

  • vue 跨域解决方法

    vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'A...

  • Vue跨域解决方法

    vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'A...

  • 跨域解决方案(史上最易懂)

    跨域总结 1.跨域思路 跨域解决方案一般分为两种:前端解决,后端解决 1.1 前端解决方案 通过前端解决的思想就是...

  • 前端跨域

    CORS跨域 1.CORS跨域-服务端设置,前端直接调用说明:后台允许前端某个站点进行访问 2.JSONP跨域-前...

网友评论

      本文标题:前端跨域调试工具 http-proxy-middleware

      本文链接:https://www.haomeiwen.com/subject/xvrtfltx.html