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:
- 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)
- Access to index.html, the request is a relative address, that is, access to the address 127.0.0.1:8889/pub/.....
- 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.
- Finally, the response data is passed to the browser. 127.207.95.11-Webpack-dev-server Browser
Webpack-dev-server Proxy Agent