Why cross-domain:

When browsers access non-homologous web addresses, access is restricted and cross-domain issues occur.

There are three common cross-domain types:

• jspn cross-domain, principle: generate script tags dynamically, introduce interface addresses through script tags (because script tags do not exist cross-domain)
• cors Cross Domain (Backend Open): Full name "Cross Domain Resource Sharing". Principle: It allows browsers to issue XMLHttpRequest requests to cross source servers, overcoming the limitation that AJAX can only be used in the same source
• vue proxy cross-domain: by requesting the local server, then the local server goes to the remote server (the server that deploys the interface at the back), and finally the local server returns the requested data to the browser (there was no cross-domain before the local server and the browser)
  Two key points:
  There is no cross-domain between the local server (a proxy server created using node.js) and the browser
  No cross-domain exists between server and server

Say nothing but code directly:

First create a vue.config.js file

// Assume the interface you want to request is: http://40.00.100.100:3002/api/user/add
module.exports = {
    devServer:{
      host:'localhost',  // Local Host
        port:5000,  // Configuration of port number
        open:true,  // Open browser automatically
        proxy:{
          '/api': {   //  Intercept interfaces that start with/api
            target: 'http://40.00.100.100:3002', //Set the domain name and port number of the interface you call Don't forget to add http
            changeOrigin: true,    //Here true implements cross-domain
            secure: false, // This parameter needs to be configured if it is an https interface
            pathRewrite: {
              '^/api':'/'  //This translates to using'/api'instead of the address inside the target, and using API instead of, for example, calling'When we drop the interface in the following components http://40.00.100.100:3002/api/user/add ', just write'/api/user/add'
            }
          },
    // If there is another interface: http://40.00.100.100:3002/get/list/add
    // Then configure a get as follows:
          '/get': {   //  Intercept interfaces that start with/get
            target: 'http://40.00.100.100:3002', //Set the domain name and port number of the interface you call Don't forget to add http
            changeOrigin: true,    //Here true implements cross-domain
            secure: false, // This parameter needs to be configured if it is an https interface
            pathRewrite: {
              '^/api':'/'  //This translates to using'/api'instead of the address inside the target.
            }
          }
			// When called, just/get/list/add
        }
    }
  }

  // Note: After modifying the configuration file, you must restart it before it takes effect;

We can use axios'baseUrl to directly default to api, so that each time we visit, the API prefix is automatically added, so we don't need to manually write this prefix on each interface by ourselves
Configure the following in the entry file:

import axios from 'axios'

Vue.prototype.$http = axios
axios.defaults.baseURL = 'api'  // Later, I found that in fact it would be possible without this feeling

If this configuration 'api/' Will read the local domain by default

If you're just developing environment tests, that's enough, if you want to distinguish between production and development environments
The following configuration is required

Sub-environment configuration across domains:

Create an api.config.js file (actually any name you like)

const isPro = Object.is(process.env.NODE_ENV, 'production')
// If it is a production environment, use an on-line interface;
module.exports = {
    baseUrl: isPro ? 'http://www.vnshop.cn/api/' : 'api/'
}

Then in main. Introduced in JS to ensure dynamic matching of defined prefixes for production and development

import apiConfig from './api.config'

Vue.prototype.$http = axios
import axios from 'axios'

axios.defaults.baseURL = apiConfig.baseUrl

With the above configuration, you can easily access the dom without introducing the axios module into any components

  async getData(){
        const res = await this.$http.get('/api/user/add');
        console.log(res);
    },

Summary:
The main way proxies cross-domain is by using the server to request the server to avoid cross-domain problems. Approximate process: Browser==>Proxy==>Target Server.

If there is something wrong, please don't hesitate to point it out. Also, you are welcome to leave a message for consultation. Thank you~