ERR_CONNECTION_REFUSED and Failed to fetch (nodejs, graphql, apollo) - node.js

I am newbie on JS frameworks, so sorry if my question is easy but I didn't find any solution on my Google friend :)
I am creating a web app with ReactJS in Front-End, NodeJS in Back-End, GraphQL and Apollo.
I have my Back-End that works on localhost:4001/api (I am viewing the GraphQL interface with a query).
I have my Front-End that's working when I am not connected to my server. But when I am connected it, I have two errors (I think they are linked).
I have in my console :
Bug
I resolved the cors error but here, I am blocked. I tried bearer-authentication, but I'm not sure how can I use it and I'm not sure it's the a problem, but bearer solved this two bugs, but created the bug "Network error: Response not successful: Received status code 400" (is it permission?)
You can view my github repo here : https://github.com/tiffanyLestroubac/ReactJs-NodeJs-GraphQl-App
Thanks in advance :)

Related

Why is Netlify changing my api link in the fetch request? Netlify: frontend Heroku: Backend

I launched my first fullstack application with Netlify and Heroku. When I test locally everything works fine but when I try the netlify I get this error in the terminal.
It should connect to Heroku, the fetch request is set up that way and I been looking online and can't seem to find any answer.
[Netlify][2]
[Front-end][3]
[Back-end][4]
P.s sorry for any odd formatting, stackoverflow insisted I format my code despite not writing any code

Access to XMLHttpRequest at 'https://sua-ap-web-1.agora.io/api/v1?action=stringuid' from origin 'http://localhost:3000' has been blocked by CORS polic

I am using create-react-app to build an application that utilizes the Agora API. While trying to do so I receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error in my browser's console. I understand this is caused by CORS and that the API doesn't have an Access-Control-Allow-Origin header.
I have tried to deal with it using: https://www.telerik.com/blogs/dealing-with-cors-in-create-react-app by adding
"proxy": "https://sua-ap-web-1.agora.io"
to packaage.json, however this does not work. I am considering setting up a Node.JS proxy server as described here, but do not know if it would work to resolve the problem and if I should spend time going down that rabbit hole or if there is a better alternative.
I did notice that #plutoless on agora's github mentions that API calls should be made from the server end and not client side like React or AngularJS.
So the question is, is there a way to make API calls using ReactJS without having to setup a proxy server?
Finally got this to work, thanks #AkshatGupta for helping me identify the problem. I switched the sdk I was using from
"agora-rtc-sdk": "^3.4.0"
to using
"agora-rtc-sdk-ng": "^4.0.1"
and it started working perfectly. I do not yet understand the underlying problem for this issue however this worked for me. Do note that I did not have to setup a proxy server or setup a proxy field in package.json as I mentioned in the question.

How to implement login authentication to my Vue NodeJS restful API?

I am new to Stackoverflow so please forgive me if my question is bit difficult to understand. However, background of my problem is following.
I have created a NodeJS RESTful API based on the following tutorial -
https://www.codementor.io/olatundegaruba/nodejs-restful-apis-in-10-minutes-q0sgsfhbd
I have also created a Vue based frontend what I use to display data from database with GET request, POST new data to database and also PATCH/DELETE requests.
I need to create a login/registration system to secure my api endpoints so that the unauthorized person cannot see/delete/modify the content but I have no idea where to start or how to implement it.
My project frontend and backend repositories are visible on:
Frontend - https://github.com/umbluu/mufc-api-fe
Backend - https://github.com/umbluu/mufc-api-be
Can someone please point out some hints/tips how to proceed with my task?

Why does Auth0 fails with error unknown client?

I have a React project using express/node.js on the backend. Tested the project thoroughly before deploying, fully functional with no problems. After hosting and configuration, the site is accessible online but any login attempt generates a 400 error stating the request is coming from an unknown client?
I can share any code snippets needed but I'm thinking something is wrong in my Auth0 configuration. I've checked and triple-checked the clientID and key in my code, as well as my web origin urls and allowed callback URLs.
Can't find any reference to this error code here on stack or on google. Auth0 support has no mention.
Has anyone had this problem?

How to connect angular2 server side with php

I recently bought a new template for my site written in angular2, i did a short course on it and started to work and everything fine.
Now come the the part where i try to connect it to my DataBase and i cant figure it out...
after a little bit of reading i saw that i need to use nodejs in order to speak with the server side, is that true?
can i use php or i must use the nodejs api to work with my Db?
am i missing the concept of the angular2 or something? can someone post a basic script of angular working with php example , i just cant find it.. :(
thanks a lot :)
The most common scenario is that you use the Http service in Angular that makes XHR (Ajax) requests to the server to fetch data (not HTML).
You can use any server that is able to receive, process and response to XHR requests. Therefore PHP is as suiteable as node.js (or .NET, Java, or any other web server)
See also https://angular.io/docs/ts/latest/guide/server-communication.html

Resources