Examples demonstrating Cross-Origin Resource Sharing (CORS). View live.
Loading a javascript resource cross-domain (cross-origin) can be blocked by the browser due to so-called CORS policy. The behaviour of CORS is dependant on the server configuration, as well as the client code. This repo demonstrates cases where the browser would succeed in loading the javascript resource, and cases where it would not.
Client-side factors:
- html crossorigin attribute
- html type attribute
Server-side factor:
One site (frontend) hosts the webpage trying to get access to cross-orrigin resources. Another (cross-origin) site (backend) hosts (javascript) resources.
If using netlify as a host, setup two separate projects: one for frontend, one for backend.
Assuming project name is cors-example, set Base directory to /frontend in the deploy configuration settings.
Note
Build command can be a no-op, since frontend is only made of static assets.
Assuming project name is cors-server, set Base directory to /backend in the deploy configuration settings.