第一种 接口有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. Windows上安装配置SSH教程(1)

    作者:feipeng8848 出处:https://www.cnblogs.com/feipeng8848/p/8559803.html 本站使用「署名 4.0 国际」创作共享协议,转载请在文章明显位 ...

  2. QQ、微信 唯一登陆设计

    唯一登陆设计指一个账号可以在多个不同的客户端进行登陆,例如PC.Android.IOS等.每一个客户端就会生成一个对应的tokan,相当于生成三个token分别对应不同的客户端. 但是同一个客户端同时 ...

  3. .Dot NET Cored简介

    一.诞生原因 1..Net平台封闭. 2.不支持跨平台. 3.受限于Windows平台性能,无法解决高性能场景. 二.优势 1.支持跨平台.开源.系统建设成本低. 2.效率和性能较好. 三.缺点 1. ...

  4. JVM性能优化--类加载器,手动实现类的热加载

    一.类加载的机制的层次结构 每个编写的".java"拓展名类文件都存储着需要执行的程序逻辑,这些".java"文件经过Java编译器编译成拓展名为". ...

  5. EWA不能及时通过邮件接收

    1. 确保EWA已经配置成功.可以通过SW_workcenter查看 2.确保EWA的邮箱设置成功 3. 检查EWAreport产生的时间 卫星系统:SDCCN 在tab"done" ...

  6. Python排序算法(六)——归并排序(MERGE-SORT)

    有趣的事,Python永远不会缺席! 如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/10800699.html 一.归并排序(MERG ...

  7. Python基础Day6

    一.代码块 一个模块(模块就是py文件),一个函数,一个类,一个文件都是一个代码块,一个整体是一个代码块. 交互模式的每一行都是一个代码块(交互模式:命令提示符),相当于每行都在不同的文件 二.id ...

  8. webpack中bundler源码编写

    新建一个项目,再新建一个src文件夹,里面有三个文件,word.js,message.js,index.js word.js export const word = 'hello'; message. ...

  9. unity协程要点

    使用协程做计时功能应注意 1.协程中用到的组件,变量等被置空前,应该将协程置空 2.置空协程之前应停止协程 3.为了确保同一个协程同时只运行一次,可在协程开始前添加安全代码:判断改协程是否存在,存在则 ...

  10. Codeforces 750 E New Year and Old Subsequence

    E. New Year and Old Subsequence 思路:线段树维护矩阵乘法. 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) #p ...