第一种 接口有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. ~postman全局变量与环境变量介绍

    postman官方文档:https://learning.getpostman.com/docs/postman/scripts/test_examples/ 一.环境变量 实例:将URL作为环境变量 ...

  2. 17 SUMIF函数、countif函数、averagif函数

    情景 按买家求他们的消费各是多少. 可以考虑使用分类汇总来做,但这里我们使用函数sumif来做. SUMIF函数 格式:=SUMIF(条件列表,匹配条件,数据区) 该函数这样理解:按照匹配条件,从条件 ...

  3. PAT(B) 1037 在霍格沃茨找零钱(Java)

    题目链接:1037 在霍格沃茨找零钱 (20 point(s)) 题目描述 如果你是哈利·波特迷,你会知道魔法世界有它自己的货币系统 -- 就如海格告诉哈利的:"十七个银西可(Sickle) ...

  4. windows安装docker,快捷启动方式无法启动

    1.在双击“Docker Quickstart Terminal”时弹出缺少快捷方式,截图如下 2.单机快捷方式查看属性,发现配置的git位置是有问题的 现在只需要把git的正确地址配置好就可以了 现 ...

  5. Java8新特性 - 新时间和日期 API

    本地时间和时间戳 主要方法: now:静态方法,根据当前时间创建对象 of:静态方法,根据指定日期/时间创建对象 plusDays,plusWeeks,plusMonths,plusYears:向当前 ...

  6. 查看IIS错误日志

    部署在IIS中的程序,难免出现数据产生异常 在事件查看器中,可以看出来具体的错误信息,代码定位

  7. C#插入时间

    //获取日期+时间 DateTime.Now.ToString(); // 2008-9-4 20:02:10 DateTime.Now.ToLocalTime().ToString(); // 20 ...

  8. Nuget & VS Plugin

    VS Plugin vsCode:https://marketplace.visualstudio.com/vscode vs:https://marketplace.visualstudio.com ...

  9. 部署Nginx网站服务实现访问状态统计以及访问控制功能

    原文:https://blog.51cto.com/11134648/2130987 Nginx专为性能优化而开发,最知名的优点是它的稳定性和低系统资源消耗,以及对HTTP并发连接的高处理能力,单个物 ...

  10. 6. kafka序列化和反序列化

    https://blog.csdn.net/weixin_33690963/article/details/91698279 kafka序列化: 生产者在将消息传入kafka之前需要将其序列化成byt ...