Vue Sets cross-domain proxy

Front and rear end separation, can not avoid cross-domain problems!! For me, this is when I need a strong back end guy; But there will inevitably be times when the back end guy is unavailable, and that’s when you have to rely on yourself

Create the vue.config.js file

1 / / method
module.exports = {
    devServer: {
        host: 'localhost'.port: '8083'.proxy: {
            '/api': {  // / API intercepts request paths starting with/API
                target: 'HTTP: 127.0.0.1:3000'.// Cross-domain domain name
                changeOrigin: true.// Whether to enable cross-domain}}}}/ / is equivalent to
2 / / method
module.exports = {
    devServer: {
        host: 'localhost'.port: '8083'.proxy: {
            '/api': {
                target: 'HTTP: 127.0.0.1:3000 / API'.changeOrigin: true.pathRewrite: {  // Rewrite the path
                    '^/api': ' '  // Make the/API null
                }
            }
        }
    }
}
Copy the code

To understand:

/ / request interface: http://127.0.0.1:3000/api/newList

/ / axios request
axios({
    method: 'get'.url: '/api/newList'
}).then(res= >{})

// The above request interface can be decomposed into 127.0.0.1:3000 / API /newList

// Method 1 understanding
/ / when the intercept to begin with/API path, the setting of cross-domain domain and path joining together becomes the HTTP: 127.0.0.1:3000 / API/newList

// Method 2 understanding
/ / when the intercept to begin with/API path, the setting of cross-domain domain and path joining together becomes the HTTP: 127.0.0.1:3000 / API/API/newList
Copy the code

See below:

This cross-domain can be solved, the above is only personal understanding, if there is any error, welcome to point out