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.
Related
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.
I'm using ReactJs and Axios to send API requests to my server but I keep getting the same error:
Failed to load http://***: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 400.
I'm trying to perform a POST request. I've also tried to download a Chrome Plugin to allow CORS. It did work for the GET requests, but not working for POST it looks like.
If I try to make requests to https://jsonplaceholder.typicode.com/users it's working fine. So I guess there's something wrong with the server.
My server is using Nginx and is on a CentOS 7 OS.
Q: How is it possible to enable CORS just for my local development (localhost) or specific websites?
EDIT: I have already tried using this config on my Nginx server - without luck: https://enable-cors.org/server_nginx.html
While I can't answer you with some specific code, here's what happens (at least what happened last time I tried Angular and had similar issues):
Before sending any further requests, there'll be a header only OPTIONS HTTP request sent to the server URL. When answering this call, the server is supposed to send a header field Access-Control-Allow-Origin containing a whitelist of domains allowed to do further calls using the API. To whitelist all requests in your dev environment it should be enough to set Nginx to answer with Access-Control-Allow-Origin: *.
For development I use the Firefox extension CORS Everywhere. It modifies all web traffic, to include the correct CORS headers. (It works at least with the somewhat dated Firefox in Opensuse 42.3.)
https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/
Note, that this subverts a security mechanism of the browser.
For deployment you must configure the server, to send the correct CORS headers. (I did never do this, the finished website is planned to work in a single IP.)
If you have access to the server and the server is using Nodejs, this should work for you:
CD into your server folder:
cd server-folder
Then run this command in order to install the 'cors' package:
npm install cors
In order to access this package, go into your server file in your IDE and in the next available line:
const cors = require('cors');
Next, add this line to use the middleware (assuming you are using Express):
app.use(cors());
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'm trying to fetch the list of official images from docker hub using v2 api. If I try to do curl or use postman, I get the response correctly, but when I try to fetch the list using angularjs service, I get the following error
XMLHttpRequest cannot load https://hub.docker.com/v2/repositories/library/?page=8&page_size=15. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.plnkr.co' is therefore not allowed access.
Can someone suggest solution for this. How can I enable cors for this?
CORS could be enabled on the server side, and this is not your case. What you could do is :
1) use a proxy, for instance NGNIX, and make Sure that all request Made to localhost/whatever are redirected to hub.docker.com . This way you can "cheat" Cross-origin block
2) if you need a temporary and dirty solution you could more simply install chrome/safari plugins to bypass CORS security check
There is only one way to bypass CORS is send request through a cors proxy like http://crossorigin.me
It's an opensource project and you can build your own proxy server by download the full source code from here: https://github.com/technoboy10/crossorigin.me
Reason behind the issue :
As per my understanding you are doing an AJAX call to a different domain than your page is on. So, the browser is blocking it for security reasons as it usually allows a request in the same origin.A tutorial about how to achieve that is using CORS.
When you are using curl or postman they are not restricted by this policy. Quoted from Cross-Origin XMLHttpRequest:
Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.