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
Create a simple request based on XML HTTP Request level 2, and receive a response.
-
Using Preflight Requests
Create a preflight request based on XML HTTP Request level 2, and receive a response. After a successful authorization, send the actual data request and receive a response.
Using Simple Requests
Learning how to handle a simple request based on XML HTTP Request level 2 enhances the security features of your application:
- 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>
- 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: *"); ?>
- 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
- 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.
- 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>
-
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); ?>
- 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. -