webpack-dev-server 代理请求 api

Question

在 开发 react 时,使用 webpack 开发,
在 请求 api 数据的 时候 ，遇到的 跨域的问题,
看到 webpack-dev-server 可以代理请求,

看到 官网的说明

proxy: {
  '/some/path*': {
    target: 'https://other-server.example.com',
    secure: false
  }
}

于是在自己 的 webpack 中 加入

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  contentBase: './public',
  publicPath: config.output.publicPath,
  hot: true,
  
  proxy: {
    '/ShoppingGuideAPI/*': {
        target: 'http://api.mu.com',
        secure: false,
    }
  },
  historyApiFallback: true
}).listen(3000, 'localhost', function(err, result) {
  if (err) {
    console.log(err);
  }
  console.log('Listening at localhost:3000');
});

在 react 组件中 引入了 Fetch

import 'whatwg-fetch';

 // 组件渲染后获取外界数据
componentDidMount() {
    fetch(api)
        .then((response) => {
            return response.json();
        })
        .then((data) => {
            console.log(data);
            this.setState({
                data: data[0]['description'],
             
            });
   
            console.log(this.state.data);
        })
        .catch((ex) => {
            console.log(ex);
        });
}

最后在请求 数据的时候 返回的却是 404 结果

Answer 1

我是这样配置的：

devServer: {
      historyApiFallback: true,
      hot: true,
      inline: true,
      contentBase: './build',
      port: 8080,
      stats: { colors: true },

      proxy: {
        '/api': {
          target: 'http://user.reekly.com/',
          pathRewrite: {'^/api' : '/campaign_huggies/t3store_freeuse/admin'},
          changeOrigin: true
        }
      }
    },

这样 http://localhost:8080/api/get... 的请求就是后端的接口 http://user.reekly.com/campai... 了

Answer 2

/ShoppingGuideAPI/* -> /ShoppingGuideAPI

大概这样就可以了，我用的另外一个vue的webpack项目，我看了下源码是基于http-proxy模块实现的。

/**
 * @param  {String} context '/api'
 * @param  {String} uri     'http://example.org/api/b/c/d.html'
 * @return {Boolean}
 */
function matchSingleStringPath(context, uri) {
    var path = getUrlPath(uri);
    return path.indexOf(context) === 0;
}