index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. 　　<head>
  4. 　　　　<meta charset="UTF-8">
  5. 　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. 　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. 　　　　<title>html template</title>
  8. 　　</head>
  9. 　　<body>
  10. 　　　　<div id='root'></div>
  11. 　　</body>
  12. </html>

index.js

  1. import React, {Component} from 'react';
  2. import ReactDom from 'react-dom';
  3. import axios from 'axios';
  4. class App extends Component{
  5. 　　render() {
  6. 　　　　return (
  7. 　　　　　　<div>hello world</div>
  8. 　　　　)
  9. 　　}
  10. 　　componentDidMount(){
  11. 　　　　axios
  12. 　　　　　　.get('/react/api/header.json')
  13. 　　　　　　.then((res)=>{
  14. 　　　　　　　　console.log(res);
  15. 　　　　　　})
  16. 　　}
  17. }
  18. 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的配置项。通过这个配置项就可以很方便进行本地接口的调试

  1. module.exports = {
  2. 　　devServer: {
  3. 　　　　contentBase:'./dist',
  4. 　　　　open:true,
  5. 　　　　hot: true,
  6. 　　　　proxy: {
  7. 　　　　　　'/react/api': 'http://www.xxx.com'
  8. 　　　　}
  9. 　　}
  10. }

配置一个proxy。意思是在/react/api下面的接口走的都是http://www.xxx.com的/react/api接口。

但是如果这个线上的接口没有好，需要用假数据。后端给了一个demo.json的临时数据用，可以这么配置
  1. module.exports = {
  2. 　　devServer: {
  3. 　　　　contentBase:'./dist',
  4. 　　　　open:true,
  5. 　　　　hot: true,
  6. 　　　　proxy: {
  7. 　　　　　　'/react/api': {
  8. 　　　　　　　　target: 'http://www.xxx.com',
  9. 　　　　　　　　pathRewrite: {
  10. 　　　　　　　　　　'header.json': 'demo.json'
  11. 　　　　　　　　}
  12. 　　　　　　}
  13. 　　　　}
  14. 　　}
  15. }

这个的意思是，如果用户请求/react/api下的接口时，首先会到www.xxx.com下面去拿数据，但拿数据的时候他还有些规则，如果拿的是header.json的数据，其实不是拿header.json下的数据，而是demo.json的数据。

最后这个proxy是devServer的proxy，这就意味着只有在开发环境下，我们对proxy的配置才会生效，因为只有开发环境下才会使用。如果这个网址是https的时候，需要加个配置支持，secure:false
  1. module.exports = {
  2. 　　devServer: {
  3. 　　　　contentBase:'./dist',
  4. 　　　　open:true,
  5. 　　　　hot: true,
  6. 　　　　proxy: {
  7. 　　　　　　'/react/api': {
  8. 　　　　　　　　target: 'https://www.xxx.com',
  9. 　　　　　　　　secure: false
  10. 　　　　　　}
  11. 　　　　}
  12. 　　}
  13. }

这里我们只讲了一个路径，/react/api，如果有多个路径怎么办呢，可以放在context里面去管理

  1. module.exports = {
  2. 　　devServer: {
  3. 　　　　proxy: [{
  4. 　　　　　　context: ['/auth', '/api'],
  5. 　　　　　　target: 'http://localhost:3000',
  6. 　　　　}]
  7. 　　}
  8. };

他的意思是你访问 /auth 或者 /api 这个路径的时候，都会代理到localhost:3000这个域名下。

除了这些，还有一些其他的配置。https://github.com/chimurai/http-proxy-middleware#options
 

webpack中使用WebpackDevServer实现请求转发的更多相关文章

  1. HTTP中的重定向和请求转发的区别

    原文出处:http://blog.csdn.net/meiyalei/article/details/2129120 一.调用方式 我们知道,在servlet中调用转发.重定向的语句如下: reque ...

  2. HTTP中的重定向和请求转发的区别（转）

    一.调用方式 我们知道,在servlet中调用转发.重定向的语句如下: request.getRequestDispatcher("new.jsp").forward(reques ...

  3. HTTP中的重定向和请求转发的区别(转)

    时间长有些忘了,转篇文章加深一下印象: 一.调用方式 我们知道,在servlet中调用转发.重定向的语句如下:request.getRequestDispatcher("new.jsp&qu ...

  4. web初学之重定向与请求转发

    重定向与请求转发的问题 (1)RequestDispatcher是通过调用HttpServletRequest对象的getRequestDispatcher()方法得到的,是属于请求对象的方法. (2 ...

  5. 请求转发：MVC设计模式、细节、请求域属性的编程实例、请求重定向和请求转发的区别

      请求转发:MVC设计模式.细节.请求域属性的编程实例.请求重定向和请求转发的区别 MVC设计模式将一次请求的响应过程分成三个功能模块(一般称之为层)来协同完成,这三个模块分别是Model(模型层) ...

  6. 04_web基础（六）之请求转发与重定向

    1.交互方式 Web组件之间跳转: 从AServlet 跳转到 BServlet. 三种类型: 1:请求转发(forward) 2:URL重定向(redirect) 3:请求包含(include) 3 ...

  7. java重定向与请求转发的区别

    最近工作不算太忙,今天在这里对java中的重定向和请求转发稍作总结,希望能帮助到大家. 请求转发: request.getRequestDispatcher().forward(); 重定向: res ...

  8. Java Web中请求转发和请求包含

    1.都是在一个请求中跨越多个Servlet 2.多个Servlet在一个请求中,他们共享request对象.就是在AServle中setAttribute()保存数据在BServlet中由getAtt ...

  9. servlet中请求转发（forword）与重定向（sendredirect）的区别

    摘自:http://www.cnblogs.com/CodeGuy/archive/2012/02/13/2349970.html 通俗易懂 servlet请求转发与重定向的区别: request.s ...

随机推荐

  1. opencv入门笔记

    一.图片基本操作 1.1 显示图片 #include <opencv2/opencv.hpp> //头文件 using namespace cv; //包含cv命名空间 void main ...

  2. JS通过ActiveX读写ini配置文件

    String.prototype.trim = function(){ return this.replace(/(^\s+)|(\s+$)/g, ''); }; IniConfig = functi ...

  3. 学习笔记：oracle学习一：oracle11g体系结构之服务器结构、数据字典

    目录 1.服务器架构 1.1 系统全局区SGA 1.1.1 高速数据缓冲区(database buffer cache) 1.1.2 重做日志缓冲区(redo log buffer cache) 1. ...

  4. Java面试 - final、finally、finalize的区别？

    final:用于声明属性, 方法和类,分别表示属性不可变.方法不可覆盖.被其修饰的类不可继承. finally:异常处理语句结构的一部分,表示总是执行. finalize:Object 类的一个方法, ...

  5. [转帖]Keccak简介

    Keccak简介 https://blog.csdn.net/chengqiuming/article/details/82819769 2018年09月23日 08:04:40 cakincqm 阅 ...

  6. Windows注册表中修改UAC(用户账号控制)及批处理脚本

    注册表路径: HKEY_LOCAL_MACHINE/SOFTWARE/Microsoft/Windows/CurrentVersion/Policies/System 键说明: ConsentProm ...

  7. Verilog整理

    1.两种实例化 2.运算符//逻辑运算+按位运算//拼接运算符 3.reg默认为1位 4.{16{1}}与{16{1'b1}}不同 5.[1023:0] in ha[3:0]=(in>>( ...

  8. Python【Network/XHR/json】

    ##################################################################### 制定一个目标(爬取周杰伦的歌曲清单): 根据目标,确认一个方 ...

  9. pandas数据结构之基础运算笔记

    import pandas as pd import numpy as np s = pd.Series([1,3,5,6,8],index=list('acefh')) s.index # 读取行索 ...

  10. HTML中关于动态创建的标签无法绑定js事件的解决方法：.on()方法的 [.selector]

    在前端页面的时候,会经常遇到用JavaScript动态创建出来的Button按钮或其他标签无法使用点击事件的问题.如下代码,使用jquery在body中动态创建一个class为demo的Button按 ...