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代理很简单. 轻松配置代理中间件进行连接,发 ...
随机推荐
- 如何用Java实现条件编译
在 C 或 C++ 中,可以通过预处理语句来实现条件编译.代码如下: #define DEBUG #IFDEF DEBUUG /* code block 1 */ #ELSE /* code bloc ...
- 地址解析协议(ARP)
地址解析协议(ARP) 地址解析协议(ARP)是指网络地址和MAC地址之间的转换 当一台主机需要向另一台主机发送数据时,需要知道目的主机的ip地址外还需要知道目的主机的mac地址.源主机首先会在自己的 ...
- 简单理解JavaScript原型链
简单理解原型链 什么是原型 ? 我是这样理解的:每一个JavaScript对象在创建的时候就会与之关联另外一个特殊的对象,这个对象就是我们常说的原型对象,每一个对象都会从原型"继承" ...
- Consul作为SpringCloud配置中心
一.背景介绍 在分布式系统中动态配置中,可以避免重复重启服务,动态更改服务参数等.一句话非常重要. 另外一篇文章也是这样说的,哈哈. Consul 作为Spring 推荐的分布式调度系统其也具备配置中 ...
- jquery滚动到顶部
<script> $.fn.scrollTo = function (options) { var defaults = { toT: , //滚动目标位置 durTime: , //过渡 ...
- shell 学习笔记5-shell-if语句
一.if条件语句 1.语法 1)单分支结构 第一种 if <条件表达式> then 指令 fi 第二种 if <条件表达式>:then 指令 fi 上文的"<条 ...
- Asp.Net Mvc 整站Https
网站要使用https需要如下几个步骤 1.申请https证书,现在已经有很多免费的https证书申请了 2.服务器中安装证书 3.网站的连接全部改为https连接 Asp.Net Mvc网站中整站改为 ...
- 【es6】promise
一.什么是promise?我们用promise解决什么样的问题 promise是异步编程的一种解决方案:从语法上来说,Promise是一个对象,从他可以获取异步操作的信息:从本意上讲,它是承诺,它承诺 ...
- url格式化函数http_build_query() 和parse_str() 函数
例子 1. http_build_query() 使用示例 <?php $data = array('foo'=>'bar', 'baz'=>'boom', 'cow'=>'m ...
- vue实现一个评论列表
<!DOCTYPE html> <html> <head> <title>简易评论列表</title> <meta charset=& ...