Forwarding issues using webpack+dev+server - Stack Overflow

Question

Using react to develop projects, my backend colleagues recently provided interfaces. I use fetch to make AJAX requests. But the console reports the following error!

Cross-domain problems have arisen. Some people say that webpack dev server can implement proxy request forwarding, so that cross-domain problems will not occur.
But I followed the official configuration and other people’s configurations online, but it’s still the same and has no effect.
devServer: {

hot: true,
contentBase: resolve(__dirname, ''),
publicPath: '/',
proxy: {
    '/api': {
      target: 'http://test.lailaapp.com',
      pathRewrite: {'^/api' : ''},
      changeOrigin: true
    }
  }

},
My configuration is as above. I don’t know what went wrong. I used the webpack2.0 version to implement hot update according to the official configuration. Can anyone help me explain how to configure it to forward requests and solve cross-domain issues?

Answer 1

I made a common sense mistake. Configuring proxy does not mean that requesting the original URL can automatically solve cross-domain problems.

You should change the request address to a local one, that is http://localhost:port/api

For examplehttp://test.lailaapp.com/api/orderPlus/v2/bills 对应的就应该修改为
http://localhost:port/api/orderPlus/v2/bills
当然http://localhost:port可以省略，也就是/api/orderPlus/v2/bills