<a-sphere material="src:url(...)"></a-sphere>
I get:
No 'Access-Control-Allow-Origin' header is present on the requested resource
Other resources not inline do work with CORs. Also I have the newest AFrame version working.
Try adding the crossorigin="anonymous" to the resource to explicitly allow images from other domains.
https://aframe.io/docs/0.2.0/core/asset-management-system.html#cross-origin
That means the resource is not being served with CORS headers. The server does not allow it.
Related
I'm using cloudfront on lightsail on my website https://topshelfaquatics.com with the help of W3Total Cache. I've used all the possible ways like allowing headers (Origin) in Cloudfront but still it is not solving.
Can you suggest me a solution?
Please look at your network tab in the developer tools. This will give you information about the http calls. Most of the time the browser give this error when it's a xhr (ajax) call and no Access-Control-* headers has been set in the response. In order to solve this there are two possibilities:
Do not use xhr requests for fonts, so do not load fonts from JS. Use the default methods in html/css for loading fonts.
Add the required Access-Control-* headers to the http response. This requires involvement of cloudfont.net, so this solution might not be very realistic.
Cross-Origin Resource Sharing - CORS - is a mechanism that use some additional HTTP headers to inform the browser that access resource has different domain from origin.
You try access resource at Cloud Front, without setup the allowed domains int, below a example that enable CORS, for HTTP method GET and all headers, in Cloud Front:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>https://topshelfaquatics.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>1800</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served. ... Certain "cross-domain" requests, notably Ajax requests, are forbidden by default by the same-origin security policy.
Chrome browser install Extension:
https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en
I believe it was yesterday when my website's custom fonts ceased to function. Now, the fonts are only shown on Safari, while Chrome and Firefox throw access control allow origin errors to their respective consoles.
Chrome Error:
Access to font at 'https://blockheaddevdevdev--grify.repl.co/styles/font/wide.ttf' from origin 'https://blockheaddevdevdev.grify.repl.co' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Firefox Error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://blockheaddevdevdev--grify.repl.co/styles/font/wide.ttf. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]
Here is the font I am using
Here is the CSS that applies the fonts to the page
Here is the page that should run these custom fonts
you are importing your style.css from this domain:
https://blockheaddevdevdev--grify.repl.co
<link href="https://blockheaddevdevdev--grify.repl.co/styles/style.css" rel="stylesheet" type="text/css">
and not: https://blockheaddevdevdev.grify.repl.co
Thats why you get an Cross-Origin Error.
If you fix the Link tag you shouldnt get that error.
I replaced the my url http://127.0.0.1/sitename/ into http://localhost/sitename/ and it worked
When I inspect a website,
I see the cssRules from document.styleSheets[x].cssRules
However, with this website stackoverflow.com, when I inspect with Chrome browser, I see document.styleSheets, but cssRules is null.
How come this is possible?
That's because the style sheets are coming from a different domain. Some browsers (such as Chrome) implement strict cross-domain policies by throwing security errors or setting the cssRules and ownerRule to null when it comes from a different domain...in your case the style sheets come from a CDN
MDN quotes the following in the CSSStyleSheet documentation...
In some browsers, if a stylesheet is loaded from a different domain,
calling cssRules results in SecurityError.
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet
To try bypass this problem, you can add crossorigin="anonymous" in the link tag to prevent the error.
More info here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin
This will create a potencial cors request but the server must respond with Access-Control-Allow-Origin: * or Access-Control-Allow-Origin: <authorized-domain>.
You can check here to see how to add CORS support to your server.
For more information about CORS you can read this and this.
I put font references to sub domain and I using that like this:
<link href="https://cdn.example.com/Styles/font-awesome.min.css" rel="stylesheet" />
Font from origin 'https://cdn.example.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://example.com' is therefore not allowed access.
I found a solution but it doesn't help me, I think the reason is I use https instead of http.
Serving contain to sub domains from an MVC / IIS web application
I will host my site using http and in the web page, I want to include some resource ( css, js ) from some https site.
Is that allowed (seems to me it is fine)?
Does any specification discuss this?
Yes, it's allowed. I'm not sure that it's documented in a specification anywhere; it seems more like a browser policy.