webpack前后端分离开发接口调试解决方案，proxytable解决方案

关键词：

proxy: {
  "/api": "http://localhost:3000"
}

proxy: {
  "/api": {
    target: "http://localhost:3000",
    pathRewrite: {"^/api" : ""} //后面可以使重写的新路径，一般不做更改
  }
} 

proxy: {
  "/api": {
    target: "https://other-server.example.com",
    secure: false
  }
} 

proxy: {
  "/api": {
    target: "http://localhost:3000",
    bypass: function(req, res, proxyOptions) {
      if (req.headers.accept.indexOf("html") !== -1) {
        console.log("Skipping proxy for browser request.");
        return "/index.html";
      }
    }
  }
} 

const targetPath='http://172.16.3.48:8080';//服务器的地址 可以是www.xxx.com
const pathX='/*';//如果打包后接口地址为fwone-central/orderinfo/* 则pathX='/*' 如果是/orderinfo/* 则pathX=''
var keysArr=[
  pathX+'/orderinfo/*',
  pathX+'/company/*',
  pathX+'/person/*',
  pathX+'/person/*/*',
  pathX+'/oncall/*',
  pathX+'/Tr/*',
  pathX+'/calldetail/*',
  pathX+'/customernotification/*',
  pathX+'/customernotification/*/*/*',
  pathX+'/sys/*',
  pathX+'/sys/*/*',
  pathX+'/invoice/*',
  pathX+'/contractservicedetails/*',
  pathX+'/customercomplain/*',
  pathX+'/callreminder/*',
]
for(let i=0;i<keysArr.length;i++){
  config.dev.proxyTable[keysArr[i]]={
    target:targetPath,
    secure: false,
    changeOrigin: true,
  }
}
console.info(Object.keys(config.dev.proxyTable))
module.exports= config

 '/fwone-central/orderinfo/*': {
        target:'http://172.16.3.48:8080',
        secure: false,
        changeOrigin: true,

      },
//这样又ok 其实我看请求的地址是一样一样的

 axios({
            method: 'get',
            url:'/orderinfo/count' ,
            params: {orderStateIds: [1, 2, 3, 4, 5, 6, 7, 8]}
          }).then(function (r) {
            if (r.data.code == 0) {
              //...
            }
          });
        }).catch(function (error) {
          console.error(error);
        })

 
 window.localPath='http://localhost:8087/fwone-central' //他可以定义在首页随时顺着项目路径修改
axios({
            method: 'get',
            url:localPath+'/orderinfo/count' ，
            params: {orderStateIds: [1, 2, 3, 4, 5, 6, 7, 8]}
          }).then(function (r) {
            if (r.data.code == 0) {
             //...
            }
          });
            cb()
        }).catch(function (error) {
          console.error(error);
        })

 build: {
   
    assetsSubDirectory: 'statics/mobile', //这是将静态资源打包到指定的文件夹下
    assetsPublicPath:'/fwone-central/', // 这是静态资源的路径
    
  },

前后端分离项目知识汇总（开发流程，跨域，开发接口）

...​​项目功能模块介绍​​​​项目技术点介绍​​​​前后端分离​​​​二、项目开发​​​​前端相关知识点​​​​开发CRUD接口​​​​改造登录到本地接口​​​​跨域​​​​如何解决跨域问题？​​​​登录功... 查看详情

解决前后端分离开发，后端重定向不到前端页面问题

...st:8080/#/main后端项目的地址，找了很久最终在webpack中找到解决方案。我们可以在devServer.proxy.onProxyRes中做处理，配置如下: 查看详情

解决前后端分离开发，后端重定向不到前端页面问题

...st:8080/#/main后端项目的地址，找了很久最终在webpack中找到解决方案。我们可以在devServer.proxy.onProxyRes中做处理，配置如下: 查看详情

前后端分离方案

1、前后端分离开发模式的mock平台预研  ：  https://www.jianshu.com/p/4648463be0f52、前后分离接口规范  ：  https://www.jianshu.com/p/c81008b68350 查看详情

前端前后端分离开发调试过程中跨域问题解决方式

1.将后台代码部署到你的电脑(安装各种jdk或者环境软件)-麻烦!后台改了代码得找后台要2.将前端代码放到跟服务器代码一起-麻烦!前端改一下东西就得上传一次3.使用方便快捷的nginx做代理(仅仅需要下载nginx稍加配置,一次性避免上... 查看详情

不懂前后端分离？这篇就够

参考技术A前后端分离前我们的开发协作模式一般是这样的：前端写好静态的HTML页面交付给后端开发。静态页面可以本地开发，也无需考虑业务逻辑只需要实现View即可。后端使用模板引擎去套模板，同时内嵌一些后端提供的模板... 查看详情

前后端分离微服务架构如何设计

...据6、bug修复前端开发技术栈h5、css、nodejs/vue/angular/react、webpack、hbuilder/vscode等后端开发技术栈SpringCloud/Springboot、SpringMVC、ORM框架、数据库、缓存框架（Redis，Codis,Memcached等），大数据框架（Hadoop/Spark/hive/Hbase/Storm/ES/Kafka）等等技... 查看详情

[转]前后端分离开发模式的mock平台预研

.../接口，用一个虚拟的对象/接口来模拟，以便测试。背景前后端分离前后端仅仅通过异步接口(AJAX/JSONP)来编程前后端都各自有自己的开发流程，构建工具，测试集合关注点分离，前后端变得相对独立并松耦合开发流程后台编写和... 查看详情

前后端分离方案以及技术选型

参考技术A作者：关开发一.什么是前后端分离？理解前后端分离大概可以从3个方面理解：1.交互形式2.代码组织形式3.开发模式与流程1.1交互形式前后端不分离后端将数据和页面组装、渲染好了之后，向浏览器输出最终的html；浏... 查看详情

前后端分离

一丶为什么要实现前后端分离:前后端分离有什么好处按照项目开发来说:1.实现前后端分离可以使项目更快的研发完成,2.加快了项目的时间传统开发形式: 前后端分离开发:在开发阶段，当有新的需求时，前后端工程师约定好接... 查看详情

为什么要进行前后端分离

传统开发模式与前后端分离模式对比传统开发模式前后端分离方式对比以上两图我们可以看到，前后端分离方式流程简单多了。前后端分离概念简单来说就是后端提供API，前端调用API获取数据来渲染页面，当然这其中还有许多细... 查看详情

为什么要进行前后端分离？

一、认识前后端分离可能很多人会有误解，认为web应用的开发期进行了前后端开发工作的分工就是前后端分离。但其实前后端分离并不只是开发模式，而是web应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口... 查看详情

drf0.前后端分离

前后端不分离的工作流程：提出需求前端页面开发翻译成模板前后端对接集成遇到问题前端返工后端返工二次集成集成成功交付上线前后端分离提出需求约定接口规范数据格式前后端并行开发前后端对接前端调试效果集成成功交... 查看详情

前后端分离与不分离

前后端不分离 　　在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。    这种应用模式比较适合纯网... 查看详情

前后端分离实践—如何解决跨域问题

...专注自己的事情了，比如前端可以使用任何想要的工具（Webpack、Gulp等等），后端也不用因为集成前端的代码而苦逼加班了。这里不讨论前后端分离的必要性，更多可参考淘宝前后端分离实践淘宝前后端分离系列文章我们为什么... 查看详情

前后端分离时代--swagger接口文档的配置与使用

在前后端分离的时代，前端开发人员和后端开发人员的沟通显得尤为重要。如果不能做到及时有效的沟通，可能导致后端开发出来的接口，前端人员无法使用，从而导致后端开发人员不得不返工，甚至延长开发周期。在了解swagge... 查看详情

前端经典面试题前后端分离（说一说你理解的前后端分离？）

...题，既然遇到了，找些资料来一起做个总结吧。 1.对前后端分离的误解  在回答这个问题的时候不要钻到某个具体的技术，或者某个具体的框架上面→比如ajax异步请求、vue或react等组件化的开发框架、再或者rest接口... 查看详情

浅谈前后端分离与不分离

前后端的分离与不分离　　随着不同终端的兴起，对开发人员的要求越来越高，纯浏览器端的响应式已经不能满足用户体验的高要求，我们往往需要针对不同的终端开发定制的版本，为了提升开发效率，前后端分离的需求越来越... 查看详情