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

This article is about how javascript carries cookie in cross-domain requests. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Build an environment

1. Generate project files

Npm init

two。 Install express

Npm i express-save

3. Add app1.js to open server port 1: 3001

Const express = require ('express') const app = express () const port = 3001max / set `cookie`app.get ("/ login", (req, res) = > {res.cookie ("JESSIONID", "10101001", {maxAge: 2000000, httpOnly: true}); res.json ({code: 2000000, message: "login successful"});}) / / check whether the browser automatically carries `cookie`app.get ("/ getUser", (req, res) = > {const user = req.headers.cookie.split ("=") [1]; res.json ({code: 200,user});}); / / static resources app.use ("/", express.static ("public")) in the public directory; app.listen (port, () = > {cookie ${port} `)})

4. Add app2.js to open server port 2: 3002

Const express = require ('express') const app = express () const port = 3002app.get ("/ crossList", (req, res) = > {res.json ({code: 200, msg: "this is returned from port 3002");}); app.listen (port, () = > {console.log (`Example app listening on port ${port} `)})

5. New public folder, new index.html file

Document same origin request cross-domain request const button = document.querySelector ("# button"); const crossButton = document.querySelector ("# crossButton"); axios.get ("http://localhost:3001/login", {}) .then ((res) = > {console.log (res);})) / / send the same domain request button.onclick = function () {axios.get ("http://localhost:3001/getUser", {}) .then ((res) = > {console.log (res);});} / / send cross-domain request crossButton.onclick = function () {axios ({method: "get", url: "http://localhost:3002/crossList",}). Then ((res) = > {console.log (res);});}

6. Start two services respectively

Node app1.js

Node app2.js

7. The project directory is as follows

At this point, the environment is set up, and you can access http://localhost:3001/index.html in your browser.

We deployed the resources to server 1, port 3001. The same origin request is 3001 interface, and cross-domain request is 3002 interface.

two。 Test homologous cookie

Loading index.html will automatically request login interface to get cookie

Click the same origin request button to send the same origin request. The getUser API request will automatically carry cookie.

3. Cross-domain requests carry cookie

Click the cross-domain request button

Resolve:

Add withCredentials: true to the 1.axios request, and click the cross-domain request again

CrossButton.onclick = function () {axios ({withCredentials: true, / / + + method: "get", url: "http://localhost:3002/crossList",}). Then ((res) = > {console.log (res);});}

two。 Set Access-Control-Allow-Origin on the server

Add to app2.js

App.all ("*", (req, res, next) = > {res.header ("Access-Control-Allow-Origin", "http://localhost:3001"); / / + next ();}))

3. Set Access-Control-Allow-Credentials on the server

Add to app2.js

App.all ("*", (req, res, next) = > {res.header ("Access-Control-Allow-Origin", "http://localhost:3001"); res.header (" Access-Control-Allow-Credentials "," true "); / / + + next ();})

At this point, I can see that cookie has been added to the cross-domain request.

4. Summary

1. Configure "withCredentials": true in the request object when the front end requests

two。 Cross-domain servers configure "Access-Control-Allow-Origin" and "http://xxx:${port}";" in the header of response

3. Cross-domain servers configure "Access-Control-Allow-Credentials" and "true" in the header of response

5. Knowledge point

1.withCredentials

The XMLHttpRequest.withCredentials property is a Boolean value indicating whether Access-Control should make cross-site requests using credentials such as cookie, authorization headers, or TLS client certificates. Setting withCredentials has no effect on requests from the same site.

In addition, this flag is used to indicate when cookie is ignored in the response. The default value is false. XMLHttpRequest cookie from different domains cannot set the cookie value for its own domain unless withCredentials is set to before the request is made. Third-party cookiewithCredentials obtained by true by setting to true will still follow the same origin policy, so the request script cannot be accessed through [xss_clean] or from the response header. -from MDN

2.Access-Control-Allow-Origin

Specifies whether the resource for the response is allowed to be shared with the given origin

3.Access-Control-Allow-Credentials

When the requested credential mode () is Access-Control-Allow-Credentials, the response header tells the browser whether to expose the response to the front-end JavaScript code. Request.credentialsinclude

When the Request.credentials of the request is, if the value is include, the browser will only expose the response to the front-end JavaScript code. Access-Control-Allow-Credentialstrue

The credentials are cookie, authorization header, or TLS client certificate.

When used as part of a response to a pre-check request, this indicates whether the actual request can be made using credentials. Please note that requests for simple GET are not pre-checked. Therefore, if a request is made for a credential resource, and if this header is not returned with the resource, the response is ignored by the browser and does not return to the Web content.

The Access-Control-Allow-Credentials header is used with the XMLHttpRequest.withCredentials property or the credentials option in the Fetch API constructor. Request () for CORS requests with credentials, in order for the browser to expose the response to the front-end JavaScript code, both the server (using the Access-Control-Allow-Credentials header) and the client (by setting the credential mode for the XHR, Fetch, or Ajax request) must indicate that they are 'choosing to include credentials.

Thank you for reading! This is the end of the article on "how javascript carries cookie in cross-domain requests". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.