1. The proxyTable proxy can be used to solve cross-domain problems in the pre-packaged local host:8080 environment.

Principle: Replace the URL address of your data request with a custom name such as'/api'. The proxyTable automatically recognizes the address of your data request url, recognizes/api characters, and then replaces/api with the original web address you want to request.

"First determine if your vuecli is 2 or 3 or 4"

vuecli2:

Add the proxyTable proxy to the dev of module.exports in the index file of the config directory.

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    proxyTable: {    //The next two / APIs can be changed to their own defined names
      '/api': {
        target: 'http://localhost:9900', //your data request address (9900 is an example here)
        secure: true,    //If it's https, add this code
        changeOrigin: true,     //Agree to cross-domain
        ws: true,
        pathRewrite: {
          '^/api': '',
        }
      }
    },
  }
}

When you use ajax or axios, you can change the / api in the url to the target path in the proxyTable, for example:

axios.get({
    url: '/api/wx/mymessage'  //proxyTable changes/api tohttp://localhost:9900
}).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

(If axios.create encapsulation is used, add/api before baseURL)

vuecli3 or 4:

Add the proxyTable proxy to the vue.config.js in the root directory (no file can be created).

module.exports ={
devServer: {
        host: "0.0.0.0",
        port: 8082, 
        https: false, 
        open: true, 
        proxy: {            //The next two / APIs can be changed to their own defined names
           '/api': {
                target: 'http://localhost:9900', //your data request address (9900 is an example here)
                secure: true,    //If it's https, add this code
                changeOrigin: true,     //Agree to cross-domain
                ws: true,
                pathRewrite: {
                      '^/api': '',
                    }
             }
        }
    }，
}

When you use ajax or axios, you can change the / api in the url to the target path in the proxyTable, for example:

axios.get({
    url: '/api/wx/mymessage'  //proxyTable changes/api tohttp://localhost:9900
}).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

(If axios.create encapsulation is used, add/api before baseURL)

This solves the cross-domain problem before packaging

1. After packaging, nginx proxy can be used to solve cross-domain problems.

Principle: The proxyTables you configure in your code after packaging will not be packaged into dist files. So look for an external plugin to solve cross-domain problems. Like proxyTables in your local environment, nginx is very well configured as an external cross-domain plugin and can be downloaded and used directly.

Nginx is to open a local localhost address for a packaged dist file. After configuring nginx, open the localhost address opened by nginx to run the packaged file instead of opening the index file inside the dist directly.

Download address: nginx: download

Download the third version of Stable version, the Windows version, and unzip it after downloading. The exe file in the unzipped file can run nginx directly (a cmd window pops up and disappears, and you can open the Explorer to see if the service is started).

You need to configure the nginx.conf file in conf before starting the service (after configuring it, restart it after the task manager shuts down nginx).

After packaging, it can be divided into three situations depending on the address of the request:

1. Request data address also opens localhost address for local machine. (Usually in practice environment)

2. Request data address is an intranet server with no proxy configured for project party A. (Usually in project docking environment)

3. The data address requested is a cloud server. [Cloud server businesses generally resolve cross-domain issues for their interfaces and can generally request directly]

nginx has two configurations depending on the 1 and 2 scenarios

1. The request data address is also a localhost address opened locally.

Put the source url:'http://localhost:9966/this/go'Change to url:'/api/this/go'

2. Request data address is an intranet server with no proxy configured for project party A. (Usually in project docking environment)

(Don't worry that this change will cause users to also need to configure nginx to open web pages. This is not a problem you want to think about. This is a problem the server needs to configure.)

Summary: vue issues across domains are not just front-end issues, which can also be resolved with comment blocks in the back-end, but back-end solutions can create vulnerabilities and increase the risk of website blackout. Do not think this is what front-end or back-end should do.