What is Cross-Origin Resource Sharing (CORS)
To understand Cross-Origin Resource Sharing (CORS) and how to avoid error regarding it.
Cross-Origin Resource Sharing (CORS)
Cross-Origin Resource Sharing is sharing resources from a different origin by using additional HTTP headers to allow a web application to access to that resources.
What is origin?
Origin is the currency to decide resource sharing and isolating.
Usually actors in the Web platform that share the same origin trust each other and have the same authority.
Origin is defined by the scheme, host and port of the URL of the resource. Scheme is client server protocol, http or https.
They are examples of same-origin and different-origin.
What is origin for?
When a browser need to get resource from a server, the browser should check whether the server is different from the one where index.html is. That’s because access to the cross-origin server can causes cross-site printing. The rule is called cross-origin policy.
Mechanism of CORS
Client (Web browser) adds “Origin” to HTTP Request header. If the origin is included in Access-Control-Allow-Origin of HTTP Response header, data can be transmitted.
You can see more about HTTP request/response more in “What is http request/response.”
There are 3 types of Cross-Origin Request.
1 Simple requests
In cross-origin resource sharing, browser uses the HTTP OPTION request method to preflight the request. Preflighting is to check if a request is accepted to the server before sending it.
However, simple requests that meet some conditions don’t trigger preflight. There are multiple conditions, and you can see them from the link below.
“Simple requests” from https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
2 Preflighted requests
If the request from browser is not simple request, browser first send an HTTP request by the OPTIONS method. Then server responses to preflight request. After preflight request is complete, the real request is sent:
The value of Origin in request should be contained in Access-Control-Allow-Origin in response.
The value of Access-Control-Request-Method should be contained in Access-Control-Allow-Methods in response
The values of Access-Control-Request-Headers should be contained in Access-Control-Allow-Headers in response.
3 Requests with credentials
Browser can send request that are aware of HTTP cookies and HTTP Authentication information.
If web application needs a resource on cross-origin server which sets Cookies, browser send GET request with Origin and Cookie header. Then server send response with Access-Control-Allow-Origin, Access-Control-Allow-Credentials(true) and Set-Cookie header.
The origin of Access-Control-Allow-Origin should be the same one as the value of Origin in the request header.
Problems with CORS
Problem with WebGL texturing
In my case, the error below occurred in WebGL texture call.
Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The image element contains cross-origin data, and may not be loaded.
How to solve this problem
If it works on the server, you should add crossOrigin to image.
image.src = url; image.crossOrigin = origin; #origin is the domain where the image exists
If it works on local development environment (directory on your HDD), you should set up a server.
Use php or python command
Open terminal and input command.
cd <path to the directory where index.html and resource exists> python -m SimpleHTTPServer 8080
cd <path to the directory where index.html and resource exists> php -S localhost:8080
XAMPP is a free and open-source cross-platform web server solution package.