Document the use of proxies by Vue to solve front-end cross-domain problems

Vue solves cross-domain problems at the front and back ends

What is cross-domain?

Cross-domain access refers to cross-domain access. The following cases are cross-domain access:Copy the code

If the domain name and port are the same, but the request paths are different, the request paths are not cross-domain. For example:

www.tmall.com/pages

www.tmall.com/chaoshi

If we access port 8080 through port 80, which belongs to the same domain name but different ports, a cross-domain request will be generated.

Why is there a cross-domain problem?

Cross-domain request does not necessarily have cross-domain problems. For example, when we use Baidu to search, clicking will redirect to other websites. The cross-domain problem is a security limitation imposed by browsers on Ajax requests: Ajax requests from a page can only use the path of the same domain name as the current page, which effectively prevents cross-site attacks. Therefore, cross-domain issues are a limitation for Ajax.Copy the code

Solutions to cross-domain problems

Jsonp

/** The earliest solution, using script tags can be cross-domain implementation */

/** Advantages and disadvantages */It is compatible with older browsers, but it only supports GET requests and does not support other types of HTTP requests such as POST, and JSONP does not return various HTTP status codes when the call fails. Moreover, it is not secure, if jSONP server has page injection vulnerability, Then all the websites that call this JSONP will have vulnerabilities and cannot contain the risk under a domain name.Copy the code

The proxy pattern

/** Make cross-domain non-cross-domain by proxy */

/** Advantages and disadvantages */A variety of requests can be supported, but additional configuration is required, and if the front end solves cross-domain problems, a proxy is fine.Copy the code

CORS

/** Standardized cross-domain request solution, secure and reliable */

/** Advantages and disadvantages */Control on the server side to allow cross-domain, colleagues supporting various request modes can customize the rules, resulting in additional requests.Copy the code

Use the proxy approach to resolve cross-domain problems

// First you need to find the vue.config.js file in the root directory. If you don't have it, create one manually

// in the vue.config.js file - this demonstrates configuring multiple agents

/** * You can do some configuration here to solve cross-domain problems */
module.exports = {
    // Set up the development server
    devServer: {
        // Configure the proxy
        proxy: {
            // Set the request path to intercept
            '/api_1': {
                // The destination address of the proxy
                target: 'http://127.0.0.1:5000'.// Whether to change the address to which the request is sent
                changeOrigin: true.// Whether to override the address
                pathRewrite: {
                    '^/api_1': ' '}},'/api_2': {
                // The destination address of the proxy
                target: 'http://127.0.0.1:5001'.// Whether to change the address to which the request is sent
                changeOrigin: true.// Whether to override the address
                pathRewrite: {
                    '^/api_2': ' '
                }
            }
        }
    }
}

// when the request is sent using AXIos
// The request path before "/api_1" may not be written, it will be provided by default
axios.get("/api_1").then((res) = > {
    console.log(res);
});
axios.get("/api_2").then((res) = > {
    console.log(res);
});
Copy the code