Webpack-dev-server Proxy Agent

One of the simplest proxy examples: Index.html has the following code

Fetch ('/api/pub/article/list?pagesize=2 '). then (data) =    {return  Data.json ()}). Then (JSON)={    console.log (JSON)})

The inside access is relative address, but I do not have the server to provide these APIs locally. Complete the above path to the absolute path on the cloud server, but report cors errors.

The workaround is to configure a proxy. This is achieved through Webpack-dev-server, the simple configuration file is as follows:

Module.exports = {  entry: {      bundle:'./main.js ',  },  output: {    ' [name].js '   },    devserver: {        8889,        ' 127.0.0.1 ',        proxy: {            '/api/* ' : {                ' http://123.207.95.11:9001 '}}}    ;

Then run (with the current directory as the root of the static file):

Webpack-dev-server--content-base./

Access to http://127.0.0.1:8889/index.html, the above code can be executed properly.

For the above configuration and operation instructions, the following things are done:

1. Listen for 127.0.0.1:8889, as the root directory of the static file in the current directory (directory of content-base parameter directives)
2. Access to index.html, the request is a relative address, that is, access to the address 127.0.0.1:8889/pub/.....
3. Because Webpack-dev-server reads the above configuration file, the request matches the/api/*, and forwards the request to the corresponding target, which is the http://123.207.95.11:9001 address. That is, request browser---Webpack-dev-server-127.207.95.11.
4. Finally, the response data is passed to the browser. 127.207.95.11-Webpack-dev-server Browser

Webpack-dev-server Proxy Agent