Mobile Web Wearable Web

Cross-Origin Resource Sharing: Enabling Client-side Cross-origin Requests

This tutorial demonstrates how you can allow cross-origin resource sharing (CORS) through simple and preflight requests.

Warm-up

Become familiar with the Cross-Origin Resource Sharing API basics by learning about:

Using Simple Requests

Learning how to handle a simple request based on XML HTTP Request level 2 enhances the security features of your application:

  1. Create an XML HTTP request on the client side, using JavaScript code that requests Ajax communication:
    <script>
       var method = "GET";
       var url = "http://another-domain.com/CORS/";
       var xhr = new XMLHttpRequest();
    
       xhr.open(method, url);
       xhr.send();
    </script>
    
  2. On the server side, define the domain from which requests are allowed. In this case, the http://origin-domain.com domain has the required authority.
    <?php
       header("Access-Control-Allow-Origin: http://origin-domain.com");
    ?>
    

    If all sites are allowed to send requests, use the wildcard (*):

    <?php
       header("Access-Control-Allow-Origin: *");
    ?>
    
  3. Check the request header.

    If you check the request header through the network log, you find that an additional Origin header has been added. This header informs the relevant server of the sender side domain. The Origin header is protected in the browser side, and cannot be changed by the user.

    GET http://origin-domain.com/CORS/simple_reqeust.html HTTP/1.1
    Host: origin-domain.com
    Origin: http://origin-domain.com
    
  4. Check the response header:
    • If the request is received from a domain with access authority, the server allows a response. The response header includes the Access-Control-Allow-Origin header set in the server side.

      HTTP/1/1 200 OK
      Access-Control-Allow-Origin: http://origin-domain.com
      
    • If the request is received from a domain without access authority, the server sends no response, and the following error occurs:
      XMLHttpRequest cannot load http://another-domain.com/CORS.
      Origin http://another-domain.com/CORS is not allowed by Access-Control-Allow-Origin.
      
    Note
    You must define the authorized domains on the server side to ensure that CORS is handled properly. For more information on setting the authorization settings on different platforms, see Enable CORS Web site.

Source Code

For the complete source code related to this use case, see the following file:

Using Preflight Requests

Learning how to handle a preflight request based on XML HTTP Request level 2 enhances the security features of your application.

  1. Create an XML HTTP request on the client side, using JavaScript code that requests Ajax communication. In addition, define the request Content-Type and add a custom header.
    <script>
       var xhr = new XMLHttpRequest();
       xhr.open("PUT", "http://another-domain.com/CORS/");
    
       xhr.setRequestHeader("Content-Type", "application/json");
    
       xhr.setRequestHeader("Header-Custom-TizenCORS", "OK");
       xhr.send(data);
    </script>
    
  2. On the server side, define the domain from which requests are allowed. In this case, the http://110.0.0.160:8081 domain has the required authority. In addition, define various server settings.

    <?php
       header("Access-Control-Allow-Origin: http://110.0.0.160:8081");
    
       /* Allowed request method */
       header("Access-Control-Allow-Methods: PUT");
    
       /* Allowed custom header */
       header("Access-Control-Allow-Headers: Content-Type");
    
       /* Age set to 1 day to improve speed caching */
       header("Access-Control-Max-Age: 86400");
    
       /* Options request exits before the page is completely loaded */
       if (strtolower($_SERVER['REQUEST_METHOD']) == 'options')
       {
          exit();
       }
    
       /* Response data */
       $arr = array("user_name" => "tizen", "phone_number" => "12312334234");
    
       /* Response data returned in JSON format */
       echo json_encode($arr);
    ?>
    
  3. Check the request and response headers.

    If you check the network log, you find that 2 communications between the browser and server occur consecutively: first the preflight request and response, and then the actual request and response.

    • The preflight request checks the access authority before sending the actual data. The Origin and Access-Control-Request-Headers headers have been added to the request, because the request has a user-defined custom header, and the Content-Type set to application/json:

      OPTION http://origin-domain.com/CORS/non_simple_reqeust.html HTTP/1.1
      Host: origin-domain.com
      Origin: http://origin-domain.com
      Access-Control-Request-Headers: Header-Custom-Tizen, origin, content-type
      
    • If the request is sent from the browser side, a preflight response is sent for it from the server side. The browser determines from the response whether the actual data is sent. In the following preflight response example, the Content-Type and Header-Custom-Tizen are included in the Access-Control-Allow-Headers header:

      HTTP/1/1 200 OK
      Access-Control-Allow-Headers: Content-Type, Header-Custom-Tizen
      Access-Control-Allow-Methods:PUT
      Access-Control-Allow-Origin:http://origin-domain.com
      Access-Control-Max-Age:86400
      
    • Once the access authority is checked, the browser sends the actual data request to the server side. This request includes the actual data:

      PUT http://origin-domain.com/CORS/non_simple_reqeust.html HTTP/1.1
      Content-Type: application/json
      Host: origin-domain.com
      Origin: http://origin-domain.com
      Header-Custom-TizenCOURSTest: OK
      
    • The response to the actual data request contains the actual handled result:

      HTTP/1/1 200 OK
      Access-Control-Allow-Headers: Content-Type, Header-Custom-Tizen
      Access-Control-Allow-Methods: PUT
      Access-Control-Allow-Origin: http://origin-domain.com
      Access-Control-Max-Age:86400
      

    If the access authority fails, the browser does not send the actual data request. Instead, the following error occurs in the browser side:

    XMLHttpRequest cannot load http://another-domain.com/CORS.
    Request header field Header-Custom-Tizen is not allowed by Access-Control-Allow-Headers.
    
    Note
    You must define the authorized domains on the server side to ensure that CORS is handled properly. For more information on setting the authorization settings on different platforms, see Enable CORS Web site.
Go to top