Vue-CLI configuration reverse proxy to solve cross-domain and process understanding


Vue-CLI provides an interface for configuration reverse proxy, that is, settingsconfig/index.jsproxyTable. The configuration is as follows:

dev: { 
 ... ... 
 Proxytable: { 
       '/API': {// Print to/APIS 
         target: '', // cross -domain address 
         Changeorigin: true, // Whether to cross the domain 
         secure: false, // Whether to use https 
         Pathrewrite: { 
           '^/api': '/api' // match the request address that starts with/API, and replace it with/API 

Call the interface example (AXIOS) in the component:

import axios from 'axios'


The address requested by the above example will be parsed as ifproxyTable#pathRewriteConfiguration to empty, then the address of the request is parsed to

The configuration above

is only solved the cross -domain in the development environment (DEV). To solve the cross -domain problem of the production environment, thenconfig/dev.env.jsconfig/prod.env.jsis also the address of the request in the development/production environmentAPI_HOST, in the development environment, we use the proxy address API above, and the normal interface address is used in the production environment. The configuration code is as follows:

module.exports = Merge (propenv, { 
   Node_env: '"Development"', // Development environment 
   API_HOST: "/API/" 
module.exports = { 
   Node_env: '"Production"', // Production environment 
   Api_host: '""' 

As shown in the figure, the request in the browserurlhttp://localhost:8081/api/portal/order/queryOrderRow?orderNumber=4015
I actually requestedurlhttp://localhost:8080/portal/order/queryOrderRow?orderNumber=4015
Local project passedhttp://localhost:8081/#/Access in the browser.

Through the fake request, the HTTP request is the same as the same source, and then send the same -source requests to the reverse proxy server, and the reverse proxy server is requestedurl, this will bypass the real request to the realurlLead cross -domain problems.


Random Posts

What should I do if there is no sound in the computer What should I do if the computer sounds silent?

NVIDIA Jetson Nano host Autoware’s learning and DEMO operation-Chapter 4-PIP3 and NVIDIA Jetson JTOP (System Surveillance Procedure)

Qualcomm platform read and write NV summary

Virtual DOM and Diff algorithm Tokki

shiro-multi-realm verification