Summary of Vue's cross-domain problem handling and solutions

When you send a network request, the following save information appears. Congratulations, you have crossed the domain.

Access to XMLHttpRequest at 'XXXXX' from origin 'XXXXXX' has been blocked by
CORS policy: Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

1.1 What is cross-domain?

The cross-domain problem arises because of the browser's homology policy. The so-called homology means that the two pages have the same protocol, host and port number. It is the core and most basic function of the browser. Without the homology policy, our browser will be very unsafe and may be attacked at any time.

When any of the protocol name, domain name, and port number is different, a cross-domain problem will occur.

One thing to emphasize here is that cross-domain processing does not mean that the request was not sent out. It means that the request was sent successfully and the server also returned the data to you, but the browser rejected it for security reasons.

2.2 How to solve cross-domain problem?

1. Method 1

If conditions permit, you can communicate with the backend. The backend will add a response header when responding, and the frontend can handle cross-domain without any operation.

2. Method 2

Vue scaffolding provides a very simple method:

If you are using cli3 or above, there is no configuration file in the directory. You need to create a vue.config.js file in the root directory and add the configuration information you need to it.

module.exports={
    pages: {
        index: {
        //Entry:"src/main.js",
        },
    },
    devServer: {
        proxy: {
            '/api': {
                target: 'URL to be requested',
                pathRewrite:{'^/api':''},
                ws: true,
                changeOrigin: true
            }
        }
    }
}

It will create a proxy server to request data from the backend instead of the browser, because there is no cross-domain problem between the server and the server.

The protocol domain name and port number of this proxy server are the same as the protocol domain name and port number when you run the project. You can

Use http://localhost:8080/api. When you add /api when requesting data, it will recognize that you need to handle cross-domain. If you don't add it, you will access the corresponding data in the root directory of the project.

3. Method 3

Using jsonp, but it can only handle get requests, such as post, put, patch, etc.

This is the end of this article about Vue handling cross-domain issues. For more relevant Vue handling cross-domain content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!