第一种 接口有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的更多相关文章

  1. WebPack系列之Proxy

    背景 当我们直接去访问https://m.weibo.cn/api/config/list时由于端口.域名的不同产生了跨域,无法请求到资源数据. 分析 WebPack中devServer的proxy代 ...

  2. [webpack]深入理解proxy代理

    1.一个基本的代理 module.exports = { //... devServer: { proxy: { '/api': 'http://localhost:3000' } } }; /api ...

  3. Webpack教程二

    Webpack教程一 开发技巧 启用source-map 现在的代码是合并以后的代码,不利于排错和定位,只需要在config中添加 ... devtool: 'eval-source-map', .. ...

  4. 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 ...

  5. 浅谈前端nuxt(ssr)

    SSR: 服务端渲染(Server Side Render),即:网页是通过服务端渲染生成后输出给客户端. 一.那为什么要使用SSR呢? 我用一句话理解的就是降低SPA(Single Page App ...

  6. 超级详细使用Webpack4.X 搭建H5开发环境

    超级详细使用Webpack4.X 搭建H5开发环境 会撸码的小马 关注 2018.05.29 17:17* 字数 603 阅读 6453评论 0喜欢 5 很久没弄博客了,这两天有点时间来搞一下最近在弄 ...

  7. MakaJs:基于 React, Redux 的轻量级前端框架

    github: maka.js 留下您宝贵的STAR!谢谢 maka maka源于中文码咖,意为写代码的大咖 一眼即可看懂的前端框架,简约而不简单 1.安装 bash sudo npm i -g @m ...

  8. 详细梳理ajax跨域4种解决方案

    前言 自动接触前端,跨域这个词就一直萦绕在耳畔.因为一般接手的项目都已经做好了这方面的处理,而且之前一直感觉对这方面模棱两可,所以今天就抽个时间梳理一下. 为什么需要跨域 跨域这个概念来自一个叫 &q ...

  9. http-proxy-middleware

    概述 这是设置代理的神器,webpack的devServer.proxy就是使用了非常强大的 http-proxy-middleware 包.Node.js代理很简单. 轻松配置代理中间件进行连接,发 ...

随机推荐

  1. python 之 网络编程(基于UDP协议的套接字通信)

    8.5 基于UDP协议的套接字通信 UDP协议:数据报协议 特点:无连接,一发对应一收,先启动哪一端都不会报错 优点:发送效率高,但有效传输的数据量最多为500bytes 缺点:不可靠:发送数据,无需 ...

  2. mtd-utils 的 使用

    关于编译可以查看文章:<Arm-Linux 移植 mtd-utils 1.x> 查看信息 使用命令前用cat /proc/mtd 查看一下mtdchar字符设备:或者用ls -l /dev ...

  3. js复制内容到粘贴板

    点击右边内容:<span onclick="copyContent(this);" title="点击复制">啊,我被复制了</span> ...

  4. java 任务定时调度(定时器)

    任务定时调度 通过Timer和Timetask,我们可以实现定时启动某个线程. java.util.Timer 在这种实现方式中,Timer类作用是类似闹钟的功能,也就是定时或者每隔一定时间触发一次线 ...

  5. 滤波器算法(1)-卡尔曼滤波小车附带题目与MATLAB程序

    1 简介 由卡尔曼这个学者提出的最佳线性滤波器,单纯时域维度即可实现[无需进行频域变换] 2 思路 由上一时刻的最佳估计值XKE_P预测①当前时刻预测值Pxv 与 ②当前时刻的测量值Mxv 进行联立计 ...

  6. 为什么要使用Optional

    为什么使用Java Optional Why use Optional? NullPointerException 有个很有名的说法: Null Pointer References: The Bil ...

  7. sublime text3上设置 python 环境

    1. 打开Sublime text 3 安装package control 2. 安装 SublimeREPL Preferences -> package control 或者Ctrl+shi ...

  8. 单例模式详解以及需要注意的地方(Singleton)

    单例模式,顾名思义,就是在Java程序中只有唯一一个实例,这样做的好处是可以在不需要多个实例的对象采用单例模式可以节省内存,否则会造成不必要的内存浪费.单例模式的定义为:保证一个类只有一个实例,自己可 ...

  9. GIL与线程进程小知识点

    一 .GIL全局解释器 GIL是一个互斥锁:保证数据的安全(以牺牲效率来换取数据的安全)阻止同一个进程内多个线程同时执行(不能并行但是能够实现并发)并发:看起来像同时进行的GIL全局解释器存在的原因是 ...

  10. MySQL主从复制(Centos6.3&MySQL5.6)

    环境: Master:Centos 6.3        192.168.1.4  Slave:Centos 6.3            192.168.1.5 MySQL: MySQL-5.6.2 ...