MEAN stack app shows 404 in console when requests for data - angularjs

In a basic complaints based db app, (CRUD) built on MEAN stack, I'm having issues while routing and Mongo returns 404 on console when I request for data based on hostel name.
https://github.com/ajayns/hostel-complaint-portal/tree/db-hostel-fix
This is the branch which I'm working that which has the issue.
enter image description here

I executed your code and found that you missed express listen code, because of this you were getting 404 error
And you can follow my github link, Here i made changes

Related

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

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

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.

React app served from s3 results in 404 page from edge/IE

So I have a React/Redux application that is being served through Amazon s3 currently. We have configured s3 to render the index.html page on a 4xx error and serve our bundle.js. This allowed the react router to be bootstrapped and take over from there. Until recently this worked without issue. Now when I try to visit the page in IE or Edge I get the IE or Edge 404 page.
If I turn off the "Show friendly HTTP error messages" option on the IE browser everything works without issue. From the research I have done this is my theory on what is happening:
When the client hits the requested route the react router has not been bootstrapped yet. This results in the 404 that has to be rescued by rendering the /index.html page. When the 404 is returned IE/Edge steps in and renders their own 404 page which prevents the index.html from ever being rendered.
I am kind of at a loss as to how to solve this issue without actually using a full on backend. I can configure a redirect in the s3 settings to replace the root url with the index.html but this will break all of the sub-routes off of the main route. Is there a way to configure the application so that it works on all major browsers without actually implementing an actual backend?
EDIT: So I found this article which shows how this issue can be solved using cloudfront by rendering the index on a custom error: https://medium.com/#omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af. Does anyone know if this is possible using cloud flare? I don't actually have the access to cloudflare personally so I am not sure of the possibilities.
If it works with "Show friendly HTTP error messages" disabled, then the issue can also be fixed by making your error pages longer. By default, IE will show those pages if it is less than 512 bytes.
OK so I discovered:
1) You cannot rescue this error in cloudflare.
2) You can put cloudfront in between S3 and cloudflare and simply implement a custom error rule.
3) Do not use the standard dropdown option when selecting the bucket for cloudfront. If you give the bucket name when configuring the error rule, cloudfront will treat it like a normal file not a static site and thus it fails to intercept the error. You have to use the fully qualified url for the bucket. I hope this saves someone some time. I lost some sleep over this issue.

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).

Google API app engine redirect uri

can someone point me in the right direction re: redirect uri
right now i have app hosted on appspot (nothing done or uploaded to it at this point)
"Error: Server Error
The server encountered an error and could not complete your request.
If the problem persists, please report your problem and mention this error message and the query that caused it."
do i need to upload anything for this to work?
https://developers.google.com/accounts/docs/OAuth2InstalledApp#choosingredirecturi
POST /o/oauth2/token HTTP/1.1
Host: accounts.google.com
Content-Type: application/x-www-form-urlencoded
code=4/v6xr77ewYqhvHSyW6UJ1w7jKwAzu&
client_id=8819981768.apps.googleusercontent.com&
client_secret={client_secret}&
redirect_uri=https://oauth2-login-demo.appspot.com/code&
grant_type=authorization_code
i just want to authenticate so that i can use the calendar api
Do upload the application. I am not sure what you mean by saying that the app is hosted on appspot but nothing done or uploaded at this point. So, first make sure that you have uploaded a version of your application.
The OAuth process is redirecting the flow if I understand correct to oauth2-login-demo.appspot.com and you must have registered this callback url when setting up your application.
So it seems that the redirection is probably taking place but you are seeing the General Exception that is normally thrown by App Engine.
You should look into the Admin Console -> Logs for your application to understand the reason for the failure. You might get some information there about the cause.
If there is a problem with your code, it will point that in the logs. Alternately, put in some exception handlers and bump up the Log Level to INFO in your logging.properties to have a better chance of tracking down the root case.

Resources