Five, Vuejs pits diary of the interface with Webpack proxy to the local

In the last blog post, we have successfully requested data from cnodejs.org, but we can note that the first sentence of our/src/api/index.js is:

Configure API interface Address var root = ' Https://cnodejs.org/api/v1 '

Here our interface address is written dead, this is a problem, but in fact is not the most important, but in cnodejs.org has helped us to handle the interface is very good, to help us solve the cross-domain problem. In actual development, many project interfaces do not allow us to cross-domain requests.

And in the first chapter of the front-end separation development model, front-end development front-end, while the backend is also in the development of interfaces, that time our front-end engineers can not be directly developed on the server, or in a local server environment, if this is a violation of our back-end separation of the original intention of development.

So how do we solve this problem? In fact, it is very simple to know that cross-domain is not the limit of the interface but the limit that the browser makes to ensure data security. Therefore, one way to solve this is to open the browser restrictions, so that we can successfully develop. But, unfortunately, the latest Chrome browser seems to have turned off this option, then we can only use another method-the interface agent to the local.

Configuring Webpack to Proxy interfaces to a local
Fortunately, the VUE-CLI scaffold tool, has fully considered the problem, we simply set up, we can achieve our goal.
We open the/config/index.js file and find the following code:

Pathsassetssubdirectory: ' Static ', Assetspublicpath: '/', proxytable: {},//Various Dev Server settingshost: ' localhost ',//Can be overwritten by process.env.hostport:8080,//can being overwritten by Process.env.HOST, if Port was in Use, a free one would be determinedautoopenbrowser:false,erroroverlay:true,notifyonerrors:true,poll:false,//https://w ebpack.js.org/configuration/dev-server/#devserver-watchoptions-//Use Eslint loader?//If True, your code would be linted During bundling and//linting errors and warnings would be shown in the console.useeslint:true,//If true, eslint errors a nd warnings'll also be shown in the error overlay//in the Browser.showEslintErrorsInOverlay:false

where proxytable: {}, this line is for us to configure the proxy. Based on the interface of cnodejs.org, we adjust this to:

Proxytable: {'/api/v1/** ': {target: ' https://cnodejs.org ',//domain name of your interface Secure:false,changeorigin:false,}}

Once we've configured this, we're ready to proxy the interface locally.
For more information on the configuration of interfaces, see: Https://github.com/chimurai/http-proxy-middleware#options
For more information on Webpack interface configuration see: https://webpack.js.org/configuration/dev-server/#devserver-proxy

Reconfigure the Src/api/index.js file
In the above our agent has been configured, but our/src/api/index.js also need to call someone else's address, so we have to reconfigure the/src/api/index.js file, as follows

Configure API interface Address var root = '/api/v1 '

Cross-domain problems generally exist only in the development environment, to the actual production environment generally do not have cross-domain problems, so this way to configure, can be a good solution to cross-domain problems. It is worth noting that after configuring the agent is not immediately effective, you need to restart the server.

We press CTRL + C to stop the service before restarting the service with CNPM run Dev.

CNPM Run Dev

After the reboot is complete, open the browser, in the F12 developer tool, you can see the following:

We can see that the interface address we requested has become localhost, which means that our interface has been successfully proxied to the local. Then switch to the Priview tab to see if the data returns properly:

If it does, then the data is returned properly, so we have successfully proxied the interface to the local and read the data. Start preparing for the following work!

Here loyal to thank Fungleo, is your selfless dedication, just let us have a reference to study, the following is the address:
http://blog.csdn.net/FungLeo/article/details/77601761

Five, Vuejs pits diary of the interface with Webpack proxy to the local