webpack 4 的 proxy
第一种 接口有api的
setupProxy.js
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(proxy('/api', {
target: 'http://127.0.0.1:8081',
secure: false,
changeOrigin: true,
pathRewrite: {
"^/api": "/api"
},
}));
};
react的请求api
import ly_req from '../config/ly_req'
// const common='api/mock/5d50cfdbc7a4ef40e1081602/sy';
const common='/api';
// export const sy_userIndex = data => ly_req(`/${common}/v1/userBaseinfoList`,data,'GET');
export const sy_userIndex = data => ly_req(`${common}/user/id/9`,data,'GET');
yml
server:
port: #项目端口
servlet:
context-path: /
Controller
@RestController
@RequestMapping("api/user")
public class UserController { @Autowired
private UserService userService; @RequestMapping("/id/{userId}")
public User testselectById(@PathVariable Integer userId) {
第二种 接口没有api的
setupProxy.js
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(proxy('/api', {
target: 'http://127.0.0.1:8081',
secure: false,
changeOrigin: true,
pathRewrite: {
"^/api": "/"
},
}));
};
react的请求api
import ly_req from '../config/ly_req'
// const common='api/mock/5d50cfdbc7a4ef40e1081602/sy';
const common='/api';
// export const sy_userIndex = data => ly_req(`/${common}/v1/userBaseinfoList`,data,'GET');
export const sy_userIndex = data => ly_req(`${common}/user/id/9`,data,'GET');
yml 同上
Controller
@RestController
@RequestMapping("user")
public class UserController { @Autowired
private UserService userService; @RequestMapping("/id/{userId}")
public User testselectById(@PathVariable Integer userId) {
webpack 4 的 proxy的更多相关文章
- WebPack系列之Proxy
背景 当我们直接去访问https://m.weibo.cn/api/config/list时由于端口.域名的不同产生了跨域,无法请求到资源数据. 分析 WebPack中devServer的proxy代 ...
- [webpack]深入理解proxy代理
1.一个基本的代理 module.exports = { //... devServer: { proxy: { '/api': 'http://localhost:3000' } } }; /api ...
- Webpack教程二
Webpack教程一 开发技巧 启用source-map 现在的代码是合并以后的代码,不利于排错和定位,只需要在config中添加 ... devtool: 'eval-source-map', .. ...
- 12. 前后端联调 + ( proxy代理 ) + ( axios拦截器 ) + ( css Modules模块化方案 ) + ( css-loader ) + ( 非路由组件如何使用history ) + ( bodyParser,cookieParser中间件 ) + ( utility MD5加密库 ) + ( nodemon自动重启node ) + +
(1) proxy 前端的端口在:localhost:3000后端的端口在:localhost:1234所以要在webpack中配置proxy选项 (proxy是代理的意思) 在package.jso ...
- 浅谈前端nuxt(ssr)
SSR: 服务端渲染(Server Side Render),即:网页是通过服务端渲染生成后输出给客户端. 一.那为什么要使用SSR呢? 我用一句话理解的就是降低SPA(Single Page App ...
- 超级详细使用Webpack4.X 搭建H5开发环境
超级详细使用Webpack4.X 搭建H5开发环境 会撸码的小马 关注 2018.05.29 17:17* 字数 603 阅读 6453评论 0喜欢 5 很久没弄博客了,这两天有点时间来搞一下最近在弄 ...
- MakaJs:基于 React, Redux 的轻量级前端框架
github: maka.js 留下您宝贵的STAR!谢谢 maka maka源于中文码咖,意为写代码的大咖 一眼即可看懂的前端框架,简约而不简单 1.安装 bash sudo npm i -g @m ...
- 详细梳理ajax跨域4种解决方案
前言 自动接触前端,跨域这个词就一直萦绕在耳畔.因为一般接手的项目都已经做好了这方面的处理,而且之前一直感觉对这方面模棱两可,所以今天就抽个时间梳理一下. 为什么需要跨域 跨域这个概念来自一个叫 &q ...
- http-proxy-middleware
概述 这是设置代理的神器,webpack的devServer.proxy就是使用了非常强大的 http-proxy-middleware 包.Node.js代理很简单. 轻松配置代理中间件进行连接,发 ...
随机推荐
- PowerBuilder学习笔记之8.5高级窗口控件
1.列表框控件 列表框控件(ListBox).图片列表框控件(PictureListBox).下拉列表框控件(DropDownListBox)以及下拉图片列表框控件(DropDownPictureLi ...
- Authorization
授权,也叫访问控制,即在应用中控制谁访问哪些资源(如访问页面/编辑数据/页面操作等).在授权中需了解的几个关键对象:主体(Subject).资源(Resource).权限(Permission).角色 ...
- python 实现 websocket
一.websocket概要: websocket是基于TCP传输层协议实现的一种标准协议(关于网络协议,可以看看文末的图片),用于在客户端和服务端双向传输数据 传统的客户端想要知道服务端处理进度有两个 ...
- 发布后的项目打开swagger
使用netcore作为纯后端提供api已经变得越来越频繁,swagger也成为很多人的选择.通常会在代码中限制ASPNETCORE_ENVIRONMENT为Production时关闭swagger.但 ...
- Spring循环依赖的三种方式以及解决办法
一. 什么是循环依赖? 循环依赖其实就是循环引用,也就是两个或者两个以上的bean互相持有对方,最终形成闭环.比如A依赖于B,B依赖于C,C又依赖于A.如下图: 注意,这里不是函数的循环调用,是对象的 ...
- 【转载】Sqlserver使用Right函数从最右边向前截取固定长度字符串
在SQL语句查询过程中,Sqlserver支持使用LEFT().RIGHT().SUBSTRING()等几个函数对字符串进行截取操作,其中Left函数表示从开始字符向后截取多少个字符,Right函数表 ...
- java利用反射打印出类的结构
1 输入一个类名:java.lang.String将打印出String类定义的结构,例如: public final class java.lang.String { public java.lang ...
- 【Distributed】分布式解决方案【汇总】
一.问题引出 二.分布式Session问题 三.网站跨域问题 四.分布式任务调度平台 五.分布式配置中心 六.分布式锁解决方案 七.缓存技术 一.问题引出 [Distributed]分布式系统中遇到的 ...
- Oracle 定时JOB
讲一下Oracle创建临时job小窍门,创建Oracle临时JOB是为了临时执行调用过程或者函数,只调用一次. 1.创建Oracle临时job declare VJOB number; begin ...
- Linux之Vim的使用
所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在. 但是目前我们使用比较多的是 vim 编辑器. vim 具有程序编辑的能力,可以主动的以字体颜色辨别语法的正 ...