Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "how to use devServer.proxy-related configuration items in vue-cli", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use devServer.proxy-related configuration items in vue-cli" article.

Description of devServer.proxy related configuration items

As shown in the figure:

ChangeOrigin parameters in devServer.proxy

When changeOrigin is false, the host in the request header is still the host; sent by the browser. If set to true: the host in the request header will be set to the value of target.

PathRewrite parameters in devServer.proxy

In this example, pathRewrite sets'^ / lr':', which works as follows:

To use a proxy, you first need to have a logo that tells the program to use a proxy for this connection, otherwise, your static resources such as html, css, js, vector graphics, etc., may all go to the proxy. So we need to use a unique identity to let the interface use the proxy and static resource files to use local.

The'/ lr': {}'in proxy tells node that my interface starts with / lr before using a proxy. All interfaces should be written as / lr/xx/xx, starting with / lr. Finally, the interface path of the proxy is http://localhost:8080/lirong/lr/xx/xx.

However, in the example, there is no / lr in the real background data interface, which is directly http://localhost:8080/lirong/xx/xx, so you need to configure pathRewrite and remove / lr with'^ / lr':', so that you can not only have the correct identity, but also remove / lr when you actually request the interface.

Detailed explanation of devServer.proxy Agent configuration

If your front-end application and back-end API server are not running on the same host, you need to proxy API requests to the API server in the development environment. It can be configured through the devServer.proxy option in * .config.js.

Introduce the dependency const proxy = require ('http-proxy-middleware') into the .config.js file

DevServer.proxy can be a string pointing to the development environment API server

/ / the server proxies any unknown requests (requests that do not match static files) to the http://localhost:4000

Module.exports = {devServer: {proxy: 'http://localhost:4000'}} more agent control behavior const proxy = require (' http-proxy-middleware') Module.exports = {devServer: {host: 'localhost',//target host port: 8080, / / proxy: {' / api': {}}, set / api in the agent, replace the request path with / api in the project with target proxy: {'/ api': {target: 'http://192.168.1.30:8085',// proxy address The address set here will replace the baseURL changeOrigin: true,// set in axios if the interface is cross-domain This parameter needs to be configured / / ws: true / / proxy websockets / / pathRewrite method overrides url pathRewrite: {'^ / api':'/'/ pathRewrite: {'^ / api':'/'} after rewriting, url is http://192.168.1.16:8085/xxxx / / pathRewrite: {'^ / api':'/ api'} Url is http://192.168.1.16:8085/api/xxxx} after rewriting / /.} the above is the content of the article on "how to use devServer.proxy-related configuration items in vue-cli" I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.