npm sync-request: NetworkError: Failed to execute 'send' on 'XMLHttpRequest' - reactjs

I'm studying about ReactJS and during my research I got stuck in middle of this untraceable issue. The idea is to present information on browser screen fetched from Database. I've chosen WebAPI to serve as a channel for communicating with database. The API implementation is working as expected, I tested it using Postman.
But I'm encountering the subjected error when I try to access API through Reducer (React-Redux implementation), please refer below screenshot.
It seems to me a CORS (Cross-Origin Resource Sharing) issue, as both API & ReactJS app running on localhost using different ports, but I'm not sure. In either case, please help me get to the solution.

Related

How to solve net::ERR_SSL_PROTOCOL_ERROR?

The error shown in this image
I just made a simple landing page with Nestjs (backend), Reactjs (frontend) and using graphql for API and deployed on AWS EC2. (The error says, "POST https://[our public address]:[end point port number]/graphql net::ERR_SSL_PROTOCOL_ERROR")
And I set up a proxy server with Nginx and put SSL with Let's encrypt.
It was fine submitting a form (just simple email info) and got them in our database (PostgreSQL) and as soon as I got the SSL implemented in NginX.
We are getting that error.
Can anyone help us to solve this error please?
tried making https protocol for backend following this official doc https://docs.nestjs.com/faq/multiple-servers#https does not seem to work and I am not sure if this is necessary to do to be honest.
The current NginX set up
Not sure if I have to do somethings on this Nginx setup.

404 when requesting to issue token | ActiveCollab API

I can successfully login using this endpoint.
POST https://activecollab.com/api/v1/external/login
However when I try to issue a token I get a 404 not found. I have tried providing an app name and vendor name, I also tried omitting these fields and I still get a 404.
Are they found in our AC account somewhere? Because we cannot seem to find them.
Any assistance would be much appreciated.
Context: I have been testing through ARC (rest client) and intend to use the api in an electron desktop application. So unfortunately the feather sdk is not really useful. I have also looked into using the NodeJS sdk but unfortunately that also returns a 404.

instagram oauth issue (make sure your redirect_uri is identical to the one you used in the OAuth dialog request)

Im trying to get basic data from instagram profiles, I am using a local webpack dev server to run my react app, I am also using Firebase functions, the function on firebase sends oauth/authorize request to instagarm's api, im getting a code response back and return it to my react popup, i then send the code to instagrams api for oatuh/access_token but im getting the following error:
Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request
Im running localhost:3000 as https with an ssl, i've set the redirecturl in the instagram developer tools to https://localhost:3000/instagram-popup/
the popup is the page I'm, loading to get the access token, it does get the code from the firebase function correctly, but fails the last call... I have lost SO many hours on this issue, if anyone has been in this situation and solved it, or didnt even encounter it but knows what i can do to fix it, i would really appreciate any guidance here

Getting CORS error When Using Spotify Open APIs

I'm getting CORS error while trying to get some data through Spotify's Open APIs such as API/v1/search?type=album&q=... and API/v1/albums/{id} in a Simple Angular 4 Application that searches for albums with a Query then tries to show that specific album Information.
I assume that these two APIs are open and don't need any kind of authorization. So How can I get data from these two when there's no JSONP method available without getting CORS error and without Authorization?
Passing client_id doesn't help I'm afraid.
As no one posted a proper answer, I ended up writing and using a simple wrapper over Spotify's API. Everything's working now! No more darn CORS errors or anything! :)

Ionic on iOS not sending request to external Api

I have custom api written in WebApi2 that serves some data in json. I'm trying to access that particular API from Ionic on iOS and Android using Angular's $http. On Android everything is ok and I'm receiving correct result. But on iOS strange thing happens, as $http even don't send request and throws error immidiately, returning http status code 0. This problem exists only on iOS emulator and iPhone. Moreover, this behavior is not observable when requesting any other site or fake test api.
What I already tried:
Add "Access-Control-Allow-Origin: *" header.
Add proxy to ionic.project, but this fixed the problem only when running Ionic Serve
Add in config.xml
configure angular to use cross-domain by setting this:
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
Any clues? Maybe this is server-side problem?
Does this also happen on an iOS version lower than 9.0? Because there has been some problems with $http since iOS 9.0. If it doesn't, it would check out this article.
Looking for solutions
When I started searching for this error I found this forum thread. It
said that the contributors had got this error too and that the error
is triggered when a network request is made using the $http service. I
used $http in my app too, but I didn’t make any request through it
when the app was starting. Also, in the forum thread it said that the
problem is triggered by adding custom headers to a network request. To
solve the problem, headers shouldn’t have a leading space in the
value. I had custom headers but I didn't have any spaces before the
value. So I decided, (wrongly as it turned out), that this article
couldn't help me.
Here’s what I tried next:
I read all the advice from Ionic's blog article again and tried to
apply it to my project - it didn’t help. I decided that as I was
getting the error in vendor files, I should try updating Ionic
Framework, Ionic CLI and all third party libraries (Angular,
Restangular, ngStorage, ...) - it took some time, but when I ran the
app again I got the same error. I created a new "clear" ionic app and
it worked properly - so I was sure that the problem was somewhere in
my code. I started debugging the app and digging around in my code in
"the old school way" - trying to cut out blocks of code and see if the
app would then work (because I got the error before it was possible to
use any Safari dev tools for debugging). In this way I found out which
line in my code was triggering this error. It was this line:
$http.defaults.headers.common.Authorization = 'Basic ' + $localStorage.user.authToken;
I use my own service in dependency
injection which executes a line of code (see above) when the service
is initialized. This is why the $http service was also causing the
error I was encountering. I removed this line from my code and
replaced it with authorization token headers in the configuration of
each request, like this:
$http.post(appConfig.apiUrl + 'profile', data, { headers: {'Authorization': $localStorage.user.authToken} })
After that my app started to load (Hurrah) which let me see some other
problems (Booo).

Resources