webpack中使用WebpackDevServer实现请求转发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>html template</title>
</head>
<body>
<div id='root'></div>
</body>
</html>
index.js
import React, {Component} from 'react';
import ReactDom from 'react-dom';
import axios from 'axios';
class App extends Component{
render() {
return (
<div>hello world</div>
)
}
componentDidMount(){
axios
.get('/react/api/header.json')
.then((res)=>{
console.log(res);
})
}
}
ReactDom.render(<App/>, document.getElementById('root'));
使用 npm run dev ("webpack-dev-server --config ./build/webpack.common.js")打包进行开发。这个时候这个接口会报错。因为localhost下面没有这个接口，那我们去请求线上的（在对方服务器允许我们跨域的时候）。我们看webpack怎么配置https://webpack.js.org/configuration/dev-server#devserverproxy。可以看到dev下面有个devServer:proxy的配置项。通过这个配置项就可以很方便进行本地接口的调试
module.exports = {
devServer: {
contentBase:'./dist',
open:true,
hot: true,
proxy: {
'/react/api': 'http://www.xxx.com'
}
}
}
配置一个proxy。意思是在/react/api下面的接口走的都是http://www.xxx.com的/react/api接口。
module.exports = {
devServer: {
contentBase:'./dist',
open:true,
hot: true,
proxy: {
'/react/api': {
target: 'http://www.xxx.com',
pathRewrite: {
'header.json': 'demo.json'
}
}
}
}
}
这个的意思是，如果用户请求/react/api下的接口时，首先会到www.xxx.com下面去拿数据，但拿数据的时候他还有些规则，如果拿的是header.json的数据，其实不是拿header.json下的数据，而是demo.json的数据。
module.exports = {
devServer: {
contentBase:'./dist',
open:true,
hot: true,
proxy: {
'/react/api': {
target: 'https://www.xxx.com',
secure: false
}
}
}
}
这里我们只讲了一个路径，/react/api，如果有多个路径怎么办呢，可以放在context里面去管理
module.exports = {
devServer: {
proxy: [{
context: ['/auth', '/api'],
target: 'http://localhost:3000',
}]
}
};
他的意思是你访问 /auth 或者 /api 这个路径的时候，都会代理到localhost:3000这个域名下。
webpack中使用WebpackDevServer实现请求转发的更多相关文章
- HTTP中的重定向和请求转发的区别
原文出处:http://blog.csdn.net/meiyalei/article/details/2129120 一.调用方式 我们知道,在servlet中调用转发.重定向的语句如下: reque ...
- HTTP中的重定向和请求转发的区别（转）
一.调用方式 我们知道,在servlet中调用转发.重定向的语句如下: request.getRequestDispatcher("new.jsp").forward(reques ...
- HTTP中的重定向和请求转发的区别(转)
时间长有些忘了,转篇文章加深一下印象: 一.调用方式 我们知道,在servlet中调用转发.重定向的语句如下:request.getRequestDispatcher("new.jsp&qu ...
- web初学之重定向与请求转发
重定向与请求转发的问题 (1)RequestDispatcher是通过调用HttpServletRequest对象的getRequestDispatcher()方法得到的,是属于请求对象的方法. (2 ...
- 请求转发：MVC设计模式、细节、请求域属性的编程实例、请求重定向和请求转发的区别
请求转发:MVC设计模式.细节.请求域属性的编程实例.请求重定向和请求转发的区别 MVC设计模式将一次请求的响应过程分成三个功能模块(一般称之为层)来协同完成,这三个模块分别是Model(模型层) ...
- 04_web基础（六）之请求转发与重定向
1.交互方式 Web组件之间跳转: 从AServlet 跳转到 BServlet. 三种类型: 1:请求转发(forward) 2:URL重定向(redirect) 3:请求包含(include) 3 ...
- java重定向与请求转发的区别
最近工作不算太忙,今天在这里对java中的重定向和请求转发稍作总结,希望能帮助到大家. 请求转发: request.getRequestDispatcher().forward(); 重定向: res ...
- Java Web中请求转发和请求包含
1.都是在一个请求中跨越多个Servlet 2.多个Servlet在一个请求中,他们共享request对象.就是在AServle中setAttribute()保存数据在BServlet中由getAtt ...
- servlet中请求转发（forword）与重定向（sendredirect）的区别
摘自:http://www.cnblogs.com/CodeGuy/archive/2012/02/13/2349970.html 通俗易懂 servlet请求转发与重定向的区别: request.s ...
随机推荐
- CEIWEI CheckSum CRC校验精灵v2.1 CRC3/CRC4/CRC5/CRC6/CRC8CRC10/CRC11/CRC16/CRC24/CRC32/CRC40/CRC64/CRC82/Adler32
CEIWEI CheckSum CRC校验精灵 是一款通用的循环冗余校验码CRC(Cyclic Redundancy Check).MD5.SHA1.SHA2.SHA3.HAVAL.SHAKE.TIG ...
- 使用SWO代替UART，实现Printf打印功能
JTAG接口中,有个SWO引脚,一直没有在意,也没有去研究过是干嘛用的.直到发现ST-LINK V2-1上也有个SWO引脚,于是去研究学习它的作用,用起来相比UART方得便多. 本文内容已经整理成PD ...
- cocos creator 倒计时code
let countDownNode = this.viewNode.getChildByName('countDownNode').getComponent(cc.Label); countDownN ...
- poj1584（判断凸包+求点到线段的距离）
题目链接:https://vjudge.net/problem/POJ-1584 题意:首先要判断凸包,然后判断圆是否在多边形中. 思路: 判断凸包利用叉积,判断圆在多边形首先要判断圆心是否在多边形中 ...
- [CF369E]Valera and Queries_离线_树状数组
Valera and Queries 题目链接:codeforces.com/problemset/problem/369/E 数据范围:略. 题解: 这种题,就单独考虑一次询问即可. 我们发现,包括 ...
- [转帖]为微软效力15年的微软前员工解释Windows 10为什么问题这么多
为微软效力15年的微软前员工解释Windows 10为什么问题这么多 https://www.cnbeta.com/articles/tech/892109.htm . 测试团队已经被裁撤 . 自动化 ...
- 人机交互技术 Week 1_人机交互概述
HCI Week 1_Introduction 18-19学年春夏学期选修了计院万华根老师的人机交互技术课程,老师由于知识产权相关原因不能提供课件,故尽可能对课程内容做详尽的课堂笔记以供复习,如有不妥 ...
- 十一、三星平台framebuffer驱动
和总线设备驱动模型类似,framebuffer分为核心层.驱动层和设备层. 核心层:就是上一章分析的fbmem.c文件 驱动层(控制器层):一般由芯片原厂提供,实现了LCD控制器通用的操作接口和配置接 ...
- 【Manacher】Colorful String
The value of a string s is equal to the number of different letters which appear in this string. You ...
- 【百度之星2019】Strassen
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6719 在本题中,我们只有两种方法计算两个的矩阵的乘积,第一种为定义法,需要次乘法和次加法.第二种为 ...