Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how to configure ajax requests to carry cookie across domains". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Some students are a little dizzy when they see the title of this article. What is the situation?

First, let's take a look at some rules for front-end data interaction:

1. Send an ajax request under the same domain name. Cookie will be carried by default in the request.

2. When sending cross-domain requests, ajax does not carry cookie by default.

3. If ajax wants to carry cookie when sending cross-domain requests, it must set the withcredentials property of the request object to true.

4. At this time, the response header Access-Control-Allow-Origin of the server cannot be * (asterisk), but must be whitelist, that is, which url is allowed to access, such as:

Access-Control-Allow-Origin: http://api.bob.com

5. In addition to setting the response header Access-Control-Allow-Origin, you must also set another response header: Access-Control-Allow-Credentials:true.

Next, let's verify one by one:

1. Send an ajax request under the same domain name. Cookie will be carried by default in the request.

We use express to build a static resource server with port 3000, then create a new page, call the ajax method of jquery directly in the page, and directly call this method to send a get request to the current url:

Then we look at network:

Carry cookie at all times.

2. When sending cross-domain requests, ajax does not carry cookie by default.

This time we are using express to build a server with port number 5000, and then send ajax request 5000 server interface in the web page above the server with port number 3000 to see the result of the request:

Network:

There is no cookie if you look carefully.

Then take a look at the third item:

3. If ajax wants to carry cookie when sending cross-domain requests, it must set the withcredentials property of the request object to true. If we use jquery to send ajax, we need to set the withcredentials property like this:

Check the network at this time:

At this point, cookie is back, and so far, the configuration of the front-end staff is complete, although now after the execution of ajax, the final call is error callback, because the backend does not support cors.

At this point, we verify the fourth rule:

4. At this time, the response header Access-Control-Allow-Origin of the server cannot be * (asterisk), but must be whitelist, that is, which url is allowed to access, such as:

Access-Control-Allow-Origin: http://api.bob.com

First, open cors on the server and set the value of Access-Control-Allow-Origin to *.

Services built through express only need to load the cors middleware and call the middleware. Without setting any parameters, the Access-Control-Allow-Origin will be set to * by default.

Restart the server with port 5000 and view the network request header information as follows:

At this time, the cookie is carried in the past, which has been verified by the above experiments.

And the response header message goes like this:

Setting Access-Control-Allow-Origin:*, in the response header indicates that cross-domain is already supported.

However, the error callback is performed after the ajax call, and the console panel prints an error:

If the attribute of withcretentials in the front-end request is true, the Access-Control-Allow-Origin in the back-end response header must not be *. So there will be an error. If the withcretentials attribute in the ajax request is removed or set to false, there will be no error, but in that case, the cookie will not be carried.

How does the backend need to be set to support the front end to send ajax requests to carry cookie? Access-Control-Allow-Origin must be set like this: Access-Control-Allow-Origin: http://api.bob.com, while in the server built by express, you only need to configure one parameter of cors middleware.

Check the network at this time and request header information:

Perfect for carrying cookie.

Look at the response head:

The value of Access-Control-Allow-Origin in the response header is set to a whitelist, but wait, why is the error destroyed after the ajax call?

Move on to number five:

5. In addition to setting the response header Access-Control-Allow-Origin, you must also set another response header: Access-Control-Allow-Credentials:true.

Just configure a parameter in the cors middleware:

At this point, check the response header information of network:

Check that there is an extra Access-Control-Allow-Credentials:true in the response header, and the callback of ajax is finally successful.

To sum up, if the company project uses front-end separation, and the back-end interface supports cross-domain with cors, and the front-end sends an ajax request with cookie, the front-end request must set the withCredenetials attribute of the XMLhttprequest instance to true, the server must set Access-Control-Allow-Origin to whitelist style, and the response header needs to be set: Access-Control-Allow-Credentials is ture.

Cors in addition to the restrictions of cookie, request headers are also limited. If the client wants to send custom request headers, the server must set Access-Control-Allow-Headers to * or whitelist style. Students who use express middleware here note that the default Access-Control-Allow-Headers of cors middleware is *, that is, using cors middleware directly allows the client to pass any custom request headers.

If you want to set the Access-Control-Allow-Headers whitelist through cors middleware, as shown below:

If you set the whitelist, the response header will not appear in the browser. Come to think of it, the whitelist is set up to keep the information from leaking.

The above is for the frontend to send a request to set a custom request header, which requires the cooperation of the server. Just set an Access-Control-Allow-Header response header.

Cors also limits the behavior of the frontend in obtaining the response header. By default, the frontend cannot get the response header. You need to set a response header: Access-Control-Expose-Headers. It is best not to set the response header as a wildcard style, but to set it as a whitelist in cors middleware:

In this way, the front end can get the response header through the getAllResponseHeaders method of the instance of the xmlhttprequset request object.

This is the end of "how to configure ajax requests to carry cookie across domains". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.