I'm getting this console log error when loading a font from a remote server:
Access to font at
'https://cdn.userway.org/widgetapp/bundles/udf/UserwayDyslexiaFont-Bold-Italic.woff'
from origin 'https://www.myWebSite.com' has been blocked by CORS
policy: No 'Access-Control-Allow-Origin' header is present on the
requested resource.
I've updated my web app to permit this font server. Now I need to get my CDN, AWS Cloudfront, to permit it.
The AWS docs have an article about this - How do I resolve the "No 'Access-Control-Allow-Origin' header is present on the requested resource" error from CloudFront?:
Under Cache key contents, for Headers, select Whitelist. From the list
of headers, select one of the headers required by your origin. Then,
choose Add header. Repeat this step for all the headers required by
your origin.
Here's what the list of headers looks like:
And here's what I know about the headers for this resource from Chrome dev tools.
What do I need to select from the List of Headers so that my site can load this font?
UPDATE
Hmmm.... if I'm reading this correctly:
https://web.dev/cross-origin-resource-sharing/
...the error message I'm getting is coming from the server providing the font, and has nothing to do with any setup on my server or CDN.
Is that correct?
Courtesy of AWS tech support, the answer is:
Access-Control-Request-Headers
Access-Control-Request-Method
Origin
Related
I am creating my personal website, and I am using live-server, but I get the CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource error. So I review the documentation, and they recommend adding --cors flag to enable cors for any origin, I did it, but the same error appears.
By the way, that's happened, especially with the font awesome script kit.
Any solutions do you want to provide me? Thanks before all.
Are these HTML tags? Add crossorigin attribute to the end of your script tag then.
I want to fetch metadata (title, image, description) from a url like a Medium article and then display it as a post on my blog. How to do it. I am using ReactJS
I tried using fetch and axios.get but it always shows error in the browser's console.
"NetworkError when attempting to fetch resource."
"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://medium.com/s/jessica-valenti/hateful-fox-news-rhetoric-can-do-real-world-harm-52e26008caa5. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)"
Use open-graph-scraper and make the request from backend-server. It works like a delight
You are not allowed to request request URL's that don't have the CORS header (Access-Control-Allow-Origin: *).
This is due security reasons of medium and other pages. They need to actively enable that header to allow clients to request it from JS.
You will need a backend that does the request for you (nodejs, python, php etc). You could also try to use https://cors-anywhere.herokuapp.com.
My origin server is password-protected. I need CloudFront to authenticate with it and cache the contents of my site.
This is basic authorization. I've set the Authorization header by going into Origin settings and setting the Header at the bottom of the page:
Header Name Value
Authorization Basic myusername:mypassword
My problem is that my CloudFront url is prompting me for a username and password. Maybe it's caching .htaccess. How can I prevent it from doing this?
Your configuration seems valid.
Custom origin headers are sent to the origin in the request. If the same header is already present in the request, it is automatically removed, first, then the custom header is added. The viewer doesn't see it.
Most likely you have to base64 encode your myusername:mypassword pair, so it looks like:
Header Name Value
Authorization Basic base64encode(username:password)
Make sure you invalidate cache before running any tries
I would like to access the raw files in a repository of mine that is on gitlab through an ajax request. However, it's not working, I'm wondering if I have to setup my project accordingly or something. Obviously my project is public. This is the error message I get :
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Which means it's on their end.
To understand Access-Control-Allow-Origin header, I highly recommend How does Access-Control-Allow-Origin header work?
When Site A tries to fetch content from Site B, Site B can send an
Access-Control-Allow-Origin response header to tell the browser that
the content of this page is accessible to certain origins. (An origin
is a domain, plus a scheme and port number.) By default, Site B's
pages are not accessible to any other origin; using the
Access-Control-Allow-Origin header opens a door for cross-origin
access by specific requesting origins.
If your GitLab is hosted on gitlab.com, I don't see a way to add your domain to response header.
The easiest solution is wrapping XMLHttpRequests to GitLab in requests to your application - and on the backend you will simply fetch and return data. For example, you won't send a XML request to https://gitlab.com/pdaw/test/raw/master/README.md, but tohttps://my.app.com/fetch-file?file=pdaw/test/raw/master/README.md. On the backend of the fetch-file action you will fetch and return raw data from https://gitlab.com/pdaw/test/raw/master/README.md
If I have configured Access-Control-Allow-Origin: http://mydomain correctly, should it be listed in the response headers if I view them using the web developer plugin? I don't see it. Should it be there?
I have tried viewing the response headers after submitting my post request, and just calling the page.
Background
I need to transfer a couple of values from mydomain to receivingdomain via XMLHttpRequest POST request and am trying to troubleshoot
XMLHttpRequest Page1.asp cannot load https://receivingdomain. No Access-Control-Allow-Origin header is present on the requested resource
If I turn on the Allow-Control-Allow-Extension plug-in my post requests work correctly. However, when this plug-in is disabled, my post requests are being received ok (the data is inserted into the database) - I'm just not getting any result back from the receiving server.