webpack中使用WebpackDevServer实现请求转发

index.html

<!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接口。

但是如果这个线上的接口没有好，需要用假数据。后端给了一个demo.json的临时数据用，可以这么配置

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的数据。

最后这个proxy是devServer的proxy，这就意味着只有在开发环境下，我们对proxy的配置才会生效，因为只有开发环境下才会使用。如果这个网址是https的时候，需要加个配置支持，secure:false

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这个域名下。

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

巴特西

webpack中使用WebpackDevServer实现请求转发

最新文章

热门文章