When I am running my web app then the following error gets displayed on the console:
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://tenor.com/view/claire-dancing-baby-sunglasses-toddler-gif-11410651 with MIME type text/HTML. See https://www.chromestatus.com/feature/5629709824032768 for more details.
I am trying to figure out the issue but not finding any solution which I am able to understand.
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://tenor.com/view/claire-dancing-baby-sunglasses-toddler-gif-11410651 with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.
I expect to get the GIF URLs from the API response.
Related
I am able to bypass 403 page using OPTIONS request method and getting 200 OK response.
The page is an assets/css folder.
Is it a bug or not that I can report to website? Please help
It depends what you mean by "bypass", and whether you are able unexpectedly extract any sensitive information (that should have been protected by authorization) via the OPTIONS request.
In general, it is normal to render a 2XX response to a preflight (OPTIONS) request if the page in question is marked as allowed for cross-origin access. See also answers in: Response for preflight 403 forbidden.
The principal difference here is that if you get an error response for OPTIONS, a cross-origin request from the browser wouldn't even be able to find out that 403; it wouldn't even be performed if the preflight failed.
TL;DR most probably not a bug, working as intended.
When I make a post request to my node.js backend using axios and I look in my chrome console network tab, I see 2 http requests to the endpoint instead of 1.
The first one has a status code of 200 and a response of GET,HEAD,POST
The second one is the one I was expecting which is a status code of 200 and whatever I set my response to be.
Is it normal to get that 1st response of GET,HEAD,POST as well or am I doing something wrong here?
As you indicated that you're using different hosts (or ports at least), this is a default behaviour of browsers to check, if the CORS protocol is understood.
From MDN:
CORS (Cross-Origin Resource Sharing) is a system, consisting of transmitting HTTP headers, that determines whether browsers block frontend JavaScript code from accessing responses for cross-origin requests.
The same-origin security policy forbids cross-origin access to resources. But CORS gives web servers the ability to say they want to opt into allowing cross-origin access to their resources.
You can find more about CORS and prefligh requests in the MDN docs.
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.
I am using Azure maps and have no problem with FF or Edge. However Chrome is giving me the following error when trying to display the map:
Access to XMLHttpRequest at atlas.microsoft.com/map/tile/pbf?&view=Unified&language=NGT&api-version=1.0&layer=basic&style=main&zoom=16&x=12586&y=26496&subscription-key=xxxx' from origin mysite.org has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
I have added mysite.org to allowed origins in Azure. Some of the map contents do display such as the location marker and map style selector etc. Only the actual map is being blocked.
How do I resolve this issue?
The CORS error is most likely a red herring here.
What's happening is that your request for some reason receives a redirect from the server, which therefore gets blocked by CORS
It's likely that this particular URL is not intended to be consumed by Ajax but is meant to be rendered directly by a browser. It could, for example, be an authentication issue where the server is redirecting you to a login page or the map server may just want to reformat your URL.
In any case, open the developer tools in a browser, tell it to not clear the requests on navigation and try to put that URL in; you'll see that some kind of redirect happens in the network tab You then need to figure out how to avoid that redirect - or, if this URL type is not intended for Ajax, rethink your design.
I wrote a bit about how CORS works here; https://www.lytzen.name/2016/02/20/playing-with-cors.html, which may or may not help.
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.