[Vue] Use axios locally to call third-party interfaces and handle cross-domain

Front End Processing Cross Domain

1. Development Preparation

1. Development Tools: VScode
2. Framework: Vue2
3. Project Structure: Standard Projects Generated by vue Scaffolding (Main Sections Only)
4. Locally established port: 8080
5. Third-party interface to request: http://1.11.1.111: port number/xxx-api/code

   Notice：The front-end environment has been set up，must ensureaxios Downloaded

II. Requirement Analysis

1. The verification code of the front-end login page (login – index.vue) needs to call the third-party verification code interface and display it .

III. Cross domain

3.1 Direct call(Cross domain)

1. Code Implementation

<script>
import axios from "axios";
export default {
    data(){
        return {
        }
    },
    methods:{
        fetchCode(){
            axios.get('http://1.11.1.111:The port number/xxx-api/code').then(res=>{
                console.log(res,"Directly call third-party interface")
            }) 
        }
    }
}
</script> 

2. Result: Cross Domain

3.2 Solve cross-domain：poxy

1. Configure main.js

// Cross domain code，qualityPlatformCan be replaced by any

axios.defaults.baseURL = "/qualityPlatform" 

2. Configure config.js

module.exports = {
    dev:{
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {                                     //  Configure multiple proxies
            '/qualityPlatform': {
                  target: 'http://1.11.1.111:The port number',
                  pathRewrite: {
                      '^/qualityPlatform': '/'
                  },
                  changeOrigin: true
            },
            '/api': {
                  target: 'http://localhost:80',        // Interface thrown by local backend
                  secure: false,
                  pathRewrite: {                        // Path rewriting
                      '^/api': '/'                      // replacetargetrequest address in
                  },
                  changeOrigin: true                    // A virtual server will be created locally，Then send the requested data，and receive the requested data at the same time，In this way, there will be no cross-domain problems when data is exchanged between the server and the server.
            },
        },
        host: '0.0.0.0', 
        port: 8080, 
        autoOpenBrowser: false,
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false, 
    }
} 

3. Call Interface

<script>
import axios from "axios";
export default {
    data(){
        return {
            form:{
                img:""
            }
        }
    },
    methods:{
        fetchCode(){
            axios.get('/xxx-api/code').then(res=>{
                console.log(res,"Directly calling the third-party interface successfully")
                // deal withbase64code and display
                this.form.image = `data:image/jpeg;base64,${res.data.img}`;
            }).catch(error=>{
                console.log(error,"ERROR");
            })
        }
    }
}
</script> 

4. Call Successful

Four. Problems encountered

1. A third-party interface is called, and status is returned as 200, but data is returned as html content

2. Cause (1) The (1) in step 3 3.2 is not configured. Duplicate name

<script>
import axios from "axios";
export default {
    data(){
        return {
        }
    },
    methods:{
        fetchCode(){
            axios.get('http://1.11.1.111:The port number/xxx-api/code').then(res=>{
                console.log(res,"Directly call third-party interface")
            }) 
        }
    }
}
</script> 

From

<script>
import axios from "axios";
export default {
    data(){
        return {
        }
    },
    methods:{
        fetchCode(){
            axios.get('http://1.11.1.111:The port number/xxx-api/code').then(res=>{
                console.log(res,"Directly call third-party interface")
            }) 
        }
    }
}
</script>