Causes and solutions for cross-domain issues in Ajax requests

1. How is cross-domain formed?

When we request a URL whose protocol, domain name, or port is different from the protocol, domain name, or port of the current page URL, we call it cross-domain.

Cross-domain will lead to:
1. Unable to read Cookies, LocalStorage and IndexedDB of non-same-origin web pages
2. Unable to access the DOM of non-same-origin web pages
3. Unable to send AJAX requests to non-same-origin addresses (can be sent, but the browser will refuse to accept the response)

2. The root cause of cross-domain

The root cause of cross-domain requests is the same-origin policy of the requesting browser, and the reasons for the cross-domain request error are: browser same-origin policy && request is of ajax type && request is indeed cross-domain

3. Solution

Introduce three methods jsonp, cors, proxy forwarding

1. JSONP

JSONP is a common method for cross-origin communication between servers and clients. The biggest feature is its simplicity, applicability and good compatibility (compatible with lower versions of IE). The disadvantage is that it only supports get requests but not post requests.
Principle: The src or href attribute of the img, srcipt, and link tags is not restricted by the same-origin policy and can be used as a request. After the backend receives the request, it returns a callback function and calls the function defined by the frontend to implement a cross-domain request.

Let's take a very simple example: we request a picture from a network address through the src attribute of the img tag. This is a non-same-origin request, but because the browser's same-origin policy is only valid for ajax requests, our request will not be affected. In other words, only ajax requests will cause cross-domain problems.

2. CORS

CORS is the abbreviation of Cross-Origin Resource Sharing. It is a W3C standard and a fundamental solution for cross-origin AJAX requests.

CORS allows any type of request. When using CORS to access data, the client does not need to change any data access logic. All the work is done automatically between the server and the browser. The front-end code is no different from sending a normal Ajax request. We only need to set it up on the server side (the back-end is active).

3. Proxy forwarding

Set up an intermediate proxy service between the front-end service and the back-end interface service. Its address remains the same as that of the front-end server. Then:
In this way, we can do interface forwarding through the intermediate server and solve cross-domain problems in the development environment. It seems complicated, but in fact, vue-cli has built-in this technology for us. We only need to configure it as required.

Configure the proxy server in the devServer (development environment) of vue.config.js to send requests through this proxy server. This is not a pure cross-domain problem. The code is as follows:

module.exports = {
  devServer: {
    // ... omitted // Proxy configuration proxy: {
        // If the request address starts with /api, the proxy mechanism will be triggered // http://localhost:9588/api/login -> http://localhost:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // The real interface address we want to proxy}
      }
    }
  }
}

Remember that the root path in baseURL is a relative address, not an absolute address.

The above is the detailed content of the causes and solutions of cross-domain problems in ajax request front-end. For more information about the causes and solutions of ajax cross-domain problems, please pay attention to other related articles on 123WORDPRESS.COM!