Based on VUE-CLI3 / CLI4 to solve the front-end using AXIOS cross domain problem

Important addition:

Because DevServer. proxy is based on the development environment, so the current use of DevServer. proxy as a proxy tool to deal with cross-domain is only temporarily solve the development environment, if it is packaged environment, but also need to be combined with the back-end processing, if there is a better way, please spare no efforts to advise ~

background

The browser reported a cross-domain error when using AXIos to request the back-end interface in vuE-CLI4 project

First, what is cross-domain

1.1 cross domain

The inability of the browser to execute scripts from other sites. It is caused by the same origin policy of the browser, a security restriction that the browser imposes on javascript.

1.2 Same Origin Policy

It means that the protocol, domain name and port must be the same. If there is one difference, it will cause cross-domain. When requesting data, the browser will report an exception in the console, prompting to deny access.

1.3 Why cross-domain

Cross-domain occurs when the back-end code starts on server A and the front-end code starts on computer B. Servers and servers can request data from each other, there is no cross-domain concept (if the server does not set the permission to prohibit cross-domain issues)

2. Configure AXIOS proxy to solve cross-domain problems (pure front-end to solve cross-domain problems)

Ideas for solving cross-domain problems:

We can configure a proxy server to request data from another server, and then send the requested data back to our proxy server, which then returns data to our client, so that we can achieve cross-domain access to data.

2.1 configuration baseUrl

// main.js

import axios from 'axios'
Vue.prototype.$axios = axiosd
axios.defaults.baseURL = '/api'
Copy the code

Description:axios.defaults.baseURL = '/api'Each request is sent with one/apiThe prefix

2.2 configure the proxy

Official Proxy configuration document description

// vue.config.js

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: '/ / 111.222.333.444:8888'.// The back-end interface you want to request is IP +port
                changeOrigin: true.// Allow cross-domain. A virtual server is created locally, and then sends the requested data and receives the requested data at the same time. In this way, there is no cross-domain problem between the server and the server
                ws: true./ / open the webSocket
                pathRewrite: {
                    '^/api': ' '.// Replace the address in target
                }
            }
        }
    }
}
Copy the code

2.3 Sending requests in Components

/ / the original interface url: http://111.222.333.444:8888/test
/ / the original request written: this. $axios. Get (' http://111.222.333.444:8888/test ')

// Request writing after configuring proxy
this.$axios.get('/test')
Copy the code

Principle: We request/test, is equivalent to requesting:localhost:8080/api/testThen the configured proxy intercepts/apiAnd put the/apiAnd all of the previous substitutionstargetSo the actual requested URL ishttp://111.222.333.444:8888/test

2.4 Restarting the VUE Project The cross-domain problem is resolved

Note: in the browser debugging tools, the proxy agent after the request url will display changes to http://localhost:8080/api/test, and will not display agent before the request of the link