I have a react webapp that calls an api (that calls another api using fetch) for image urls and renders the images on the screen through img tags.
The issue I'm having is that the images don't load and instead i get a CORB warning in the console.
Cross-Origin Read Blocking (CORB) blocked cross-origin response
https://website.com
with MIME type text/html. See
https://www.chromestatus.com/feature/5629709824032768 for more
details.
Notice that im having an issue with CORB not CORS A lot of online posts just give the soluton of adding stuff to the headers which may solve CORS issue but i don't believe they solve CORB. In any event, the api i'm using is not mine so i wouldn't be able to add anything server side anyway.
Do i need to add something to my project client side to get this to work? Any ideas would be appreciated.
That happens because the type you requested does not match the data type that is responded from the server. to overcome this try to compare the two. But, if you doesn't have access to target server, You can make a proxy to the destination server. create one more server that will edit the response header from example.com
Example:
Client App => Your proxy server with modified Content-Type header (Ex: http://myproxy.com) => Your destination server (Ex: http://example.com)
Or if you don't want to create a new server and the application is only opened by you personally, you can replace your browser with a version that doesn't yet apply CORBS.
There is no other attempt I know for the client besides that.
Related
I am using React to create an application and using a PHP server for the API. I realized when there is a PHP error i am unable to see what the error is. The only thing i get back is
'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
Is there anyway where I can see what is the error message from the php side?
Actually, the current error message is pretty comprehensive. You need to configure CORS correctly by adding appropriate headers.
Cross-Origin Request Headers(CORS) with PHP headers
You are getting the CORS issue because your PHP server is running on a different port compared to your react server (react dev server, running on port 3000).
There are two action items to be done in this case:
You may whitelist localhost:3000 on your PHP server (you can check this answer https://stackoverflow.com/a/33090515/13142033).
Use a logger service in your PHP code. For example monolog (https://github.com/Seldaek/monolog). So, you may use a try-catch or generic exception handlers in your PHP code, and whenever there is an error use the logger to write to a file on the disk.
Actually, when you fix the CORS issue, you will see PHP error logs in your react API responses, but having a logger service is a good practice.
Forgive me for the obvious error I am obviously committing...
I understand CORS, how and why it's used. But I'm missing the blindingly obvious in this instance.
I'm trying to access a publicly available API that should work fine (I've been assured)
If I hit the endpoint in Chrome, or in Postman, all works fine: wonderful JSON is returned.
When I try to do the same using axios from within my create-react-app's componentDidMount, I get a CORS error, specifically
Access to XMLHttpRequest at 'http://some-interesting-url/sub-url?blabla=blip&foo=bar' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
What is it I'm failing to grasp? Is there anything I can do from my end? (I have no control over the server)
The Postman app is not a browser so it isn't bound by the rules of CORS. In a browser too, trying to access a URL directly doesn't trigger Cross-Origin-Request-Sharing policies. CORS, by definition will only affects the 'cross-origin' requests made from background JS code of a web-page, to another web-page or API not hosted on same domain name.
Based on the error posted, the API in question is not sending Access-Control-Allow-Origin header. If it's possible to get the API changed, that you should get the header added to response (with value '*', or your domain name). However if that's not possible, then you'd need to route the request through a web-server that you own and include this header there. This kind of does work like a proxy, albeit for a specialized use-case.
If you already have some server side application running, you can simply add another end point to your application. A call to this new end point should trigger the 'Public API' call, and send the response back to client. Since the server side program (eg PHP/Python/NodeJS) would never be a browser, they will not face the CORS issues. If your original web-page is also loaded from same web-server, then the response header can be skipped.
I access a server that I can change in any way. It is only available to me.
GETS / POSTS work in curl, but I get an error in my angular web app
I read a ton of posts about this, and after nothing seemed to work, I installed the CORS extension to Chrome, added *://*/*, and I have to turn it on anytime I'm trying to access the server. But it works.
Most of the posts say this is because the server does not allow access from outside sources. So I did some more digging and found the W3 CORS enabled site, that specifies a filter must be added.
However, when I get the error, I can open the network panel and see that the response came back exactly as I was expecting, so why did I get an error?
This makes it seem like Chrome is not allowing access.
Why must the server be changed to allow this?
Does this mean anyone with this chrome extension can access my server?
It seems like it should be possible to configure a header in my $http.get that would allow this, but everyone keeps saying its the server...
Cross domain calls are not allowed by default. When the browser makes a call to a website or Web-API sitting on a different domain than the domain opened on the browser, it includes a HTTP header "Origin" in the request. The server looks at this header and if it's white-listed it includes the header Access-Control_Allow_Origin in the response. All this happens in a pre-flight request using HTTP Options method before the actual GET/POST call. So for the CORS to work the server has to allow the client domain, so the browser can make further calls.
When I make an $http.post request and set the "withCredentials" property to true.
My request works fine in Chrome and Fiefox. However, I'm getting the error below in IE:
XMLHttpRequest: Network Error 0x80070005, Access is denied.
I noticed that if I enable the "Access data resources across domains" setting in IE, The error gets resolved. However I need to find an alternative solution because I can't ask the users to enable that setting obviously.
I noticed that a $http.get request to the same domain is working in IE with no issue, the issue is only with the $http.post request, the Options request is getting a 500 internal server and I see the request and response headers below:
Note:
I do have the necessary custom headers, and I can see them in Chrome when the OPTIONS request succeeds. The headers that I see in Chrome are listed below:
Could you please let me know if I'm missing something that would make the request work in IE without having to enable Access data sources across domains?
Internet Explorer 9 doesn't support cookies in CORS requests. The withCredentials property of the $http arguments attempts to send cookies. I don't think there's any way to fix it with headers. IE10+ should work by default, just be sure that you are not in compatibility mode. CORS isn't fully implemented in IE10 either, but the type of request you are trying to do should work.
You didn't mention what the nature of your web app is, but it impacts the type of workaround you will need for IE9. If possible, see if you can refactor your code to use a GET request instead (again, I don't know what you are trying to do via AJAX so this may be impossible).
You may be able to use Modernizr or something similar to detect if the browser supports CORS. If it is not supported, send the request without AJAX and have a page refresh.
Another alternative if you really want to use AJAX is to set up a proxy on your web server, i.e. the server on the same domain. Instead of making the cross-origin request directly, you make the AJAX request to your same-origin server, which then makes the request to the cross-origin server for you. The server won't have CORS issues. This solution assumes, of course, that you have some server-side scripting going on such as PHP, Node or Java.
I am trying to develop a website that reads a JSON response from a certain endpoint and post it after certain processing to the page.
I am using $http.get(url) (AngularJS)
However I am facing problems getting the response.
I have tried to use other URLs and it worked then the cause of the problem probably is not the code.
The Error is: "No Access Control Allow Origin header is present on the requested resource".
Other responses suggested something related to CORS and privacy issues ; but when i type the URL directly in my browser it gives a JSON response directly. (So basically there is no privacy issues in the server side right?)
My question is what should I do ? Is there another way to get the content of the page pointed by the url (i am sure that it will only contains the JSON response)
Thanks in Advance
I came across this question:
1. If we substitute the URL in the address bar, it is similar to receiving data from the server of this site
In order to send requests to other servers need to use JSONP HTTPS for secure channel
Sending data can be carried out, but with the replies received will be a problem in the form JSON
Please send to the server if use PHP, then use CURL
JS->Our server->Server api->Our server->JS