Configuring CORS for Hosting the SmartTUBE Web App
When you configuring a hosting site for the SmartTUBE App for Web, a CORS* problem may occur. This can be a failure to open the application in the browser. In this case, please check for the following CORS errors in the web-browser’s console (Dev Tools):
|
|
Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be accessed from another domain outside the domain from which the first resource was served. A web page may freely embed cross-origin images, stylesheets, scripts, iframes, and videos. Certain “cross-domain” requests, notably Ajax requests, are forbidden by default by the same-origin security policy. CORS defines a way in which a browser and server can interact to determine whether it is safe to allow the cross-origin request. It allows for more freedom and functionality than purely same-origin requests, but is more secure than simply allowing all cross-origin requests. More wiki… |
|
Code |
|
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at….. Reason: CORS header ‘Access-Control……….’ missing Access to …. has been blocked by CORS policy: Responce to preflight request doesn’t pass access control check: Redirect is not allowed for a preflight request |
If this happens, you need to configure your hosting site to match the following requirements:
- Return the following headers for any request:
|
Code |
|
Access-Control-Allow-Origin: <http_origin> |
Replace <http_origin> with a value of the “Origin:” header of the HTTP request. <http_origin> SHALL NOT be “*”, because wildcard origin fails with credentials.
- Allow the OPTIONS method and return HTTP code 200 on it. Redirects are not allowed for the OPTIONS method.
- Set the headers from Requirement 1 for the OPTIONS method.
If you are using the nginx web server, you can add the following code to its configuration:
|
Code |
|
server { listen *:80; # $http_origin is a value from the Origin: header of the request add_header ‘Access-Control-Allow-Origin’ $http_origin; add_header ‘Access-Control-Allow-Credentials’ ‘true’; add_header ‘Access-Control-Allow-Methods’ ‘GET, POST, PUT, OPTIONS’; add_header ‘Access-Control-Allow-Headers’ ‘X-Requested-With, Content-Type, Range, SoapAction, If-Modified-Since, If-None-Match, X-Smartlabs-Request-ID, Authorization, X-Smartlabs-MAC-Address’; location / { if ($request_method = ‘OPTIONS’) { return 200; } } … } |
Note: if the nginx upstream already sets a header that needs to be overwritten, then add_header should be replaced with more_set_headers from the ngx_http_headers_more module.
For more info on CORS, click here.