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

dev: { 
 ... ... 
 
 Proxytable: { 
       '/API': {// Print www.exaple.com to/APIS 
         target: 'https://www.exaple.com', // 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'

axios({
	method:'post',
	url:'/api/login',
	data:{
		username:'qwe',
		password:123456
	}
}).then();

The address requested by the above example will be parsed ashttps://www.exaple.com/api/login. ifproxyTable#pathRewriteConfiguration to empty, then the address of the request is parsed to

The configuration abovehttps://www.exaple.com/login。

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: '"http://40.00.100.100:3002/"' 
 }

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.