I am working locally with react and a nodejs server. I have configured my nodejs server to communicate with react and it works.
From react I want to check if external urls (for example youtube) exist, but the cors error always jumps.
I have tried with axios, XMLHttpRequest, fetch and I have used the header : 'Access-Control-Allow-Origin': '*',
I can remove the cors validation from the browser for testing, but what happens when I upload it to the server?
How can I check if an image, page, video... on an external server exists?
CORS is only applied when you try to do it directly from your browser. Then you can create your own server, create an API endpoint to check if a URL exists, and then, from your react page, you send requests to your API and your API check the page existence. – (by Pipe)
Related
exact issue:- call POST https://postman-echo.com/post API from react js Axios give cors error, is it possible? or any other frontend do this?
code sandbox:- https://codesandbox.io/s/axios-forked-gjj82c?file=/src/index.js:257-264
NOTE:- check error in network
I am working on some tasks where I need to call some other APIs from different domains and some of the APIs give me cors error.
my boundaries are
localhost, local IP, other IP, domain with port or subdomains
EX:-
http://localhost:5000/test
http://192.168.0.111:5000/test
http://3.91.432.163:5000/test
https://postman-echo.com/post
Any frontend language I can choose.
I have tried multiple ways but can not solve it
but find 1 way to do this stuff using cors-anywhere
I have created 1 server using this package and called blocked URL by using it
EX:- as in question call API using Axios with URL
http://localhost:6000/https://postman-echo.com/post
HERE http://localhost:6000 is my cors-anywhere server
and it works for me
NOTE:- you can use https://cors-anywhere.herokuapp.com/ hosted server too(it is the demo of this package)
I have a locally hosted wordpress installation using woocommerce, and a separate locally hosted react webapp that will be used to manage the products. I'm using the woocommerce-rest-api react plugin to call the end points.
GETs work fine and don't have any issues, however PUT and DELETE I'm having issues with CORS.
I've updated the wordpress htaccess:
and call the endpoint like so:
and this is what I get in dev tools:
Here is the preflight headers and response and then the failing call:
Any ideas what I'm doing wrong or what I've missed?
Your preflight response from (what i assume is the wordpress server) appears to be missing the Access-Control-Allow-Origin header in the response (sent back from the OPTIONS request).
To match your other requests this should be *. However it is not best practice to use * for security reasons and should instead use the domains you want to be able to access this from browsers.
So i'm trying to upload pdf files to directus. In postman it's working fine and uploads successfully on my React project i keep getting "You are not allowed to upload files. What am I doing wrong?
Could be cors problem
Could be that you overwrite your token via postman
From the official Directus API Docs:
By default, all data in the system is off limits for unauthenticated users. To gain access to protected data, you must include an access token with every request.
Source: https://docs.directus.io/api/authentication.html
I don't know how your project is structured, but if you're already authenticated within your (Web)app and want to upload using Axios or similar, you should pass the temporary or static token that you've already got to the library or method that sends the file (Header -> Authorization: bearer xxtokenxx).
If you still have questions, the documentation link above has everything you need.
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 deployed a weather app created with create-react-app. In development I would use the chrome extension allow access control origin. Now that it is deployed with github pages, I'm getting the error:
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'https://boka44.github.io' is therefore not allowed
access. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.
It seems like I need to add a header to my server, but I'm confused as to how and where to add it.
My code is here: https://github.com/Boka44/weather
Any help would be deeply appreciated.
The API endpoint (The one that provides weather information) which you are calling has disabled CORS which means you can never make a client-facing call (i.e. through a browser) because the browser will block the call.
You have 2 options here:
If you can change the API endpoint: you can add a CORS header to allow origins from your client app's domain.
If you cannot change the server code: Create your own API endpoint that calls the original API endpoint and have your client app call your own API. (i.e. You just make a proxy server that directs your calls to the original API endpoint). In this case, you can specify a CORS header on your server to allow calls from your client app domain only.
Dark Sky API docs says that it is not allowing CORS. So you can't get data to your client side code from their server. So create a proxy server in PHP or some other platforms, which will make an api call and produces the JSON formatted response.