CORS

1. Interface cross domain problem

   There are two main solutions to solve the interface cross-domain problem:

   1. CORS (mainstream solution, recommended)

   2. JSONP (flawed solution, only supports GET requests)

      
      

2. Use cors middleware to solve cross-domain problems

   cors is a third-party middleware for Express. Cross-domain problems can be easily solved by installing and configuring cors middleware.

   Steps for usage:

   1. Run npm install cors install middleware

   2. Use const cors = require('cors') import middleware

   3. Call app.use(cors()) before routing Configure middleware

      
      

3. What is CORS

   CORS (Cross-Origin Resource Sharing) consists of a series of HTTP response headers that determine whether the browser prevents front-end JS code from obtaining resources across domains.

   By default, the browser’s same-origin security policy prevents web pages from obtaining resources across domains. However, if the interface server is configured with CORS-related HTTP response headers, the cross-domain access restriction on the browser side can be lifted.

   
   

   Precautions:

   1. CORS is mainly configured on the server side. The client browser can request the CORS-enabled interface without any additional configuration.

   2. CORS is compatible with browsers. Only browsers that support XMLHttpRequest Level2 can normally access the server-side interface with CORS enabled, such as IE10+, Chrome4+, FireFox3.5+.

      
      

4. CORS related response headers

   1. Access-Control-Allow-Orign

      Access-Control-Allow-Orign: <origin>|* : where the origin parameter value specifies the out-of-domain URL that is allowed to access the resource. For example the following field value will allow only requests from http://itcast.cn:

      res.setHeader('Access-Control-Allow-Origin', 'http://itcast.cn')

      If the specified value is the wildcard *, it means that requests from any domain are allowed:

      res.setHeader('Access-Control-Allow-Origin', '*')

      
      

   2. Access-Control-Allow-Headers

      By default, CORS only supports the client to send 9 request headers to the server (the client request header is not within these 9, the request fails): Accept, Accept-Language, Content-Language, DPR, Downlink, Save-Data, Viewport-Width, Width, Content-Type (values are limited to text/plain, multipart/form-data, application/x-www-form -urlencoded one of the three)

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

      res.setHeader('Access-Control-Allow-Headers', 'Content-Type, X-Custom-Header')

      
      

   3. Access-Control-Allow-Methods

      By default, CORS only supports client-side GET, POST, and HEAD requests.

      If the client wants to request the server’s resources through PUT, DELETE, etc., it needs to specify the HTTP methods allowed by the request through Access-Control-Allow-Methods on the server side. .

      res.setHeader('Access-Control-Allow-Methods', 'POST, GET, DELETE, HEAD')

      res.setHeader('Access-Control-Allow-Methods', '*')

​

5. Classification of CORS Requests

   When the client requests the CORS interface, according to the difference of request method and request header, the CORS request can be divided into two categories classes, which are:

   
   

   1. Simple request: Both conditions are met:

      1. The request method must be one of GET, POST, HEAD

      2. The HTTP header information must not contain custom headers, which need to be within the nine request headers in Section 4.7.4.2

         
         

   2. Preflight request: As long as the request meets any of the following conditions, a preflight request must be made

      1. The request method is a request method other than GET, POST and HEAD
      2. The request header contains custom header fields
      3. The data in application/json format is sent to the server

      Before the browser and the server formally communicate, the browser will send an OPTION request for preflight to know whether the server allows the actual request, so this OPTION request is called a preflight request. After the server successfully responds to the preflight request, it will send the real request with real data.

      
      

   The difference between a simple request and a preflight request: In a simple request, the client and the server only make one request, while the preflight request is twice (OPTION preflight request and real request).