All Products
Search
Document Center

Cross-Origin Resource Sharing (CORS)

Last Updated: Mar 10, 2021

Cross-origin access refers to request a resource with a different source (different domain name, protocol, or port) from its own resource.

The browser sets the same-origin policy for security reasons, which limits the cross-origin requests from within the script. But in actual practice, cross-origin access often occurs. Thus, W3C has provided a standard solution for cross-origin: Cross-Origin Resource Sharing (CORS), which supports the secured cross-origin request and data transmission.

The browser divides the CROS requests into the following two types:

  • Simple request
  • Pre-check request: A protection mechanism to prevent resource from being modified by unauthorized requests. The browser sends a pre-check request by OPTIONS method before sending actual request, in order to know whether the server allows the cross-origin request. Once the cross-origin request is confirmed allowed, the actual HTTP request will be initiated.

Simple request

Simple request meets the following conditions:

  • Request method is one of the followings:
    • HEAD
    • GET
    • POST
  • HTTP header information contains no more than the following fields:
    • Cache-Control
    • Content-Language
    • Content-Type
    • Expires
    • Last-Modified
    • Pragma
    • DPR
    • Downlink
    • Save-Data
    • Viewport-Width
    • Width
  • The value of Content-Type is no more than the following types:
    • text/plain
    • multipart/form-data
    • application/x-www-form-urlencoded

Pre-check request

For all the requests that do not meet the conditions for simple request, before actual communication, an OPTIONS request is triggered for pre-check. This kind of request is Pre-check request.

The pre-check request sends some formal information to the server attached in the request header, which mainly include:

  • Origin: Request source information.
  • Access-Control-Request-Method: Request type of the following request, such as POST, GET, and so on.
  • Access-Control-Request-Headers: The explicit headers list in the following request.

After receiving the pre-check request, the server will determine whether to allow cross-origin request according to the information attached in the header, and return the corresponding information through the response header:

  • Access-Control-Allow-Origin: Allow the cross-origin Origin list.
  • Access-Control-Allow-Methods: Allow the cross-origin method list.
  • Access-Control-Allow-Headers: Allow the cross-origin Header list.
  • Access-Control-Expose-Headers: Allow the exposed Header list.
  • Access-Control-Max-Age: The maximum browser cache time, in seconds.
  • Access-Control-Allow-Credentials: Whether to allow to send Cookie.

And the browser will determine whether to continue sending the actual request according to the returned CORS information. The above actions are done by the browser automatically, the server only needs to configure the specific CORS rules.

Support for CORS

MGS provides the function of configuring CORS rules, which allows the business system to decide whether to allow specific cross-origin requests. The rules are configured in the dimension of appId + workspaceId.

Configure CORS

Log in to mPaaS console and complete the following steps:

  1. On the left navigation bar, click Mobile Gateway Service.
  2. On the Manage gateway tab page, click the Function switch tab to configure CORS.

    CORS CORS rule

After turning on CORS, the application’s all API services in the current workspace supports the cross-origin requests that match the following configurations:

  • Allowed origins: Access-Control-Allow-Origin, multiple origins supported, separated with commas, wildcard character “*” is supported.
  • Allowed methods: Access-Control-Allow-Methods, multiple methods supported.
  • Allowed headers: Access-Control-Allow-Headers, multiple headers supported, separated with commas, wildcard character “*” is supported.
  • Exposed headers: Access-Control-Expose-Headers, multiple headers supported, separated with commas, wildcard character “*” is not supported.
  • Validity period: Access-Control-Max-Age, the maximum browser cache time, in seconds.
  • Allow credentials: Access-Control-Allow-Credentials, whether to allow to send Cookie.

Cross-origin request

Cross-origin API request needs to be added with X-CORS-${appId}-${workspaceId} request header. When the pre-check request arrives at gateway, the gateway parses X-CORS-${appId}-${workspaceId} in Access-Control-Request-Headers to obtain appId and workspaceId, and then obtain the corresponding CORS configuration. T gateway cross-origin request’s header must contain the following information:

  • X-CORS-\${AppId}-\${WorskapceId}: This part is required. Replace the placeholders with the actual AppID and WordspaceId.
  • Operation-Type
  • WorkspaceId
  • AppId
  • Content-Type
  • Version
  1. $.ajax({
  2. url: 'http://${mpaasgw_host}/mgw.htm',// Enter the gateway address
  3. headers: {
  4. 'X-CORS-${appId}-${workspaceId}':'1' // This part is required
  5. 'Operation-Type':${operationType}, // Enter the operationType
  6. 'AppId':${appId}, // Enter the appId
  7. 'WorkspaceId':${worksapceId}, // Enter the worksapceId
  8. 'Content-Type':'application/json',
  9. 'Version':'2.0',
  10. },
  11. type: 'POST',
  12. dataType: 'json',
  13. data: JSON.stringify(reqData),
  14. success: function(data){}
  15. });
  16. }
Note: For the allowed headers of CORS, please add or set “*” according to actual situation.