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

This article mainly introduces "how to solve the problem of vue project proxyTable configuration and deployment server". In daily operation, I believe many people have doubts about how to solve the problem of vue project proxyTable configuration and deployment server. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubt of "how to solve the problem of vue project proxyTable configuration and deployment server". Next, please follow the editor to study!

ProxyTable configuration and deployment server

To create a node.js server locally, the frontend needs to set cross-domain access to the local interface.

1. Index in config

Locate proxyTable and complete the following settings

ProxyTable: {'/ api': {target: 'http://localhost:8808/', / / destination interface domain changeOrigin: true, / / whether to cross-domain pathRewrite: {' ^ / api':'/'/ / rewrite interface}

two。 In the method of calling the interface

The following is the node.js server's

Remember::! Be sure to restart the front-end project after configuration, otherwise an error will be reported.

Meaning of proxyTable proxy parameters

In the vue project, you can find the index.js file and write the proxyTable to the corresponding agent. Some people on the Internet say that they create a new vue.config.js file and import it when the project starts. It is also possible.

ProxyTable: {/ / configuration here'/ api' is equivalent to target. You visit / api = http://localhost:54321'/ api': {/ / the api can be customized, such as abc, but the / ^ api below should also be changed to / ^ abc. Target: 'http://localhost:54321/', / / the interface address of the server That is, the real address you want to access, either http or https can / / http://localhost:54321/json.data.json, changeOrigin: true, / / is it a cross-domain request? It must be, there is no need to configure this proxyTable without cross-domain. LogLevel: 'debug',// debugging, you can output the real address of the agent, and comment it out when you go online. PathRewirte: {/ / here is the additional link. For example, the real API contains / api, which needs to be configured like this. You can write either of the following two ways: one, leave blank, do not write'/ ^ api':', / / represent your request in axios'/ api/info' = http://localhost:54321/info / / method two Rewrite'/ ^ api': 'api/', / / represents your request in axios' / api/info' = http://localhost:54321/api/info}. At this point, the study on "how to solve the problem of proxyTable configuration and deployment of server in vue project" is over. I hope to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.