webpack中使用WebpackDevServer实现请求转发

最新推荐文章于 2023-06-13 09:12:46 发布

weixin_30457465

最新推荐文章于 2023-06-13 09:12:46 发布

阅读量190

点赞数

文章标签： webpack ViewUI

原文链接：http://www.cnblogs.com/wzndkj/p/10885286.html

版权

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

转载于:https://www.cnblogs.com/wzndkj/p/10885286.html

weixin_30457465

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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">...
复制链接

扫一扫