Node.js study notes (8) #CORS cross-domain

Table of contents

1. Why cross-domain problems occur

2. Limitations brought about by non-homogeneity

3. Solving cross-domain issues in Express

1.What is CORS

2. Use CORS middleware to solve cross-domain problems

① Introduction to cors middleware

② Use of cors middleware

3. Set response headers to handle cross-domain requests

① cors response header: Access-Control-Allow-Origin

② cors response header: Access-Control-Allow-Headers

③ cors response header: Access-Control-Allow-Methods

---

1. Why cross-domain problems occur

Due to the browser's same-origin policy restrictions, cross-domain issues may occur. Same origin policy (Same origin policy) is a convention. It is the core and most basic security function of the browser. If the same origin policy is missing, the normal functions of the browser may be affected. It can be said that the Web is built on the basis of the same-origin policy, and the browser is just an implementation of the same-origin policy. The same-origin policy prevents JavaScript scripts from one domain from interacting with content from another domain. The so-called same origin (that is, in the same domain) means that the two pages have the same protocol , host and port number .

Simply put, when any one of the protocol , domain name , and port of a request URL is different from the current page URL, it is a cross-domain request .

Current page url	Requested page url	Is it cross-domain?	reason
http://www.test.com/	http://www.test.com/index.html	no	Same origin (same protocol, domain name, and port number)
http://www.test.com/	https://www.test.com/index.html	Cross domain	Different protocols (http/https)
http://www.test.com/	http://www.baidu.com/	Cross domain	The main domain name is different (test/baidu)
http://www.test.com/	http://blog.test.com/	Cross domain	Different subdomain names (www/blog)
http://www.test.com:8080/	http://www.test.com:7001/	Cross domain	Different port numbers (8080/7001)

2. Limitations brought about by non-homogeneity

1. Unable to read Cookie, LocalStorage and IndexedDB of non-original web pages

2. Unable to access the DOM of non-original web pages

3. Unable to send AJAX requests to non-original addresses

3. Solving cross-domain issues in Express

1.What is CORS

CORS stands for Cross-Origin Resource Sharing, which translates as cross-domain resource sharing. It consists of a series of HTTP response headers that determine whether the browser prevents the front-end JS code from obtaining resources across domains.

The browser's same-origin security policy prevents web pages from obtaining resources "cross-domain" by default. However, if the interface server is configured with CORS-related HTTP response headers, the browser-side cross-domain access restrictions can be lifted.

2. Use CORS middleware to solve cross-domain problems

① Introduction to cors middleware

cors is a third-party middleware for Express. By installing and registering the cors middleware, cross-domain problems can be easily solved.

② Use of cors middleware

Ⅰ.Install cors middleware

npm install cors

Ⅱ.Import cors middleware

const cors = require('cors')

Ⅲ. Call app.use(cors()) before routing to configure middleware

app.use(cors())

3. Set response headers to handle cross-domain requests

① cors response header: Access-Control-Allow- Origin

Specify the external domain URL that is allowed to access the resource. If set to * , all access is allowed. As shown below, only requests from http://127.0.0.1:2000 are supported.

res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:2000')

② cors response header: Access-Control-Allow- Headers

By default, CORS only supports the client to send the following 9 request headers to the server: Accept, Accept-Language, Content-Language, DPR, Downlink, Save-Data Viewport-Width, Widt, Content-Type (values ​​are limited to text/ One of plain, multipart/form-data, application/x-www-form-urlencoded).

If the client sends additional request header information to the server, the additional request header needs to be declared on the server side through Access-Control-Allow-Headers, otherwise the request will fail.

res.header('Access-Control-Allow-Headers', 'Content-Type')

③ cors response header: Access-Control-Allow- Methods

By default, CORS only supports clients to initiate GET, POST, and HEAD requests. If the client wants to request server resources through PUT, DELETE, etc., it needs to specify the HTTP methods allowed for the actual request through Access-Control-Alow-Methods. If set to * , all HTTP request methods are allowed access.

res.header('Access-Control-Allow-Methods', 'GET,POST,PUT')