I have a project for a website and chrome app.
Following is a part of my code.
const payload = {
item1: 'item1',
item2: 'item2'
};
const url = 'https://api.example.com/api/login/login-callback?uid=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&exp=1673882023';
const authRequest = await axios.post(url, payload);
I've built it for chrome extension, it works well.
And then I've deployed it to my localhost, it returns 504 error status. On the live site, it is same too.
I tried to solve it in several ways, but didn't find the key.
I'd like to hear experts' opinion.
Related
I managed to subscribe to a Youtube Feed through https://pubsubhubbub.appspot.com/subscribe on a web browser, I've been trying to refresh my subscription to PubSubHubbub through Fetch on NodeJS, the code I used is below
const details = {
'hub.mode': 'subscribe',
'hub.topic': 'https://www.youtube.com/xml/feeds/videos.xml?channel_id=${process.env.ID}',
'hub.callback': process.env.callback,
'hub.secret': process.env.secret
};
const endpoint = 'http://pubsubhubbub.appspot.com/subscribe'
var formBody = [];
for (const property in details) {
const encodedKey = encodeURIComponent(property);
const encodedValue = encodeURIComponent(details[property]);
formBody.push(encodedKey + "=" + encodedValue);
}
formBody = formBody.join("&");
const result = await fetch(endpoint, { method: "POST", body: formBody, 'Content-Type': 'application/x-www-form-urlencoded'})
console.log(result.status, await result.text())
Expected:
Status 204
Actual:
Status 400, content: "Invalid value for hub.mode:"
I expected at least for the content to tell me what the invalid value was, however it ended up being blank, it appears to me that it did not manage to read the POSTed content at all. I'm looking for ways to improve my code so that I don't encounter this problem.
I realised that I was supposed to specify in the content type header that charset=UTF-8. I'm not particularly well-versed in sending requests as of yet so this is definitely an eye-opener for me. After adding it in the server responds with 204 as expected and so I'll close my question.
A workout that I tried while trying to fix this was to import the exec() function from child_process module to run cURL and post the request instead. However I would recommend to stick to one language to make things more readable and using exec() runs commands directly from the shell which may have undesirable effects.
No matter the component I am in, I keep getting infinite requests. I saw these infinite requests in the chrome developer tool network section. This is how the request address looks like:
ws://localhost:3000/ws
The request name is ws.
The status code is: 101 Switching Protocol. The application is a MERN stack application. I am using axios to handle the requets.
Here is an example of one of my API calls with axios:
//fetch user
useEffect(()=>{
const ourRequest = axios.CancelToken.source()
const fetchSingleUser = async () =>{
const response = await axios.get(`/users/singleUser/${path}`,{cancelToken: ourRequest.token})
setUser(response.data);
}
fetchSingleUser()
return () => {
ourRequest.cancel()
}
}, [])
What could be causing these requests?
I am using Angular 8 with a NodeJS backend in a lab environment. I have a button in Angular which sends a value to the backend server using a POST request. When the value is received, the backend reaches out to an API server based on the value from the form which returns a status code in JSON which I need to use for conditionals in the frontend.
The Angular button logic looks like this:
this.form = this.fb.group({
ticket: [''],
})
}
const testTicket = this.form.value.ticket
submitForm() {
this.http.post('http://backend.com:8090/api/backendquery?testTicket='+ testTicket ,{}).subscribe (
(response) => {
console.log(response)
if(response != 'failure') {
this.ticketFound=true
this.ticketNotFound=false
status = 'Success'
} else {
// if(response == null) {
this.ticketNotFound=true
this.ticketFound=false
status = 'Failed'
}
})
}
The backend code reaching out to the API server looks like this:
var cors = require('cors');
app.use(cors());
app.post('/api/backendquery', function(req, res){
res.redirect('https://username:password#myserver.com/ticketquery='+req.query.testTicket);
});
I passed the credentials in the URL since the API server requires authentication.
I obtain the results successfully from Postman using the following URL:
http://backend.com:8090/api/backendquery?testTicket=12345
However, when using the browser by submitting the value, I get the following error on console:
'http://backend.com:8090/api/backendquery?testTicket=12345' from origin 'http://frontend:4200' has been blocked by CORS policy: Redirect location '' contains a username and password, which is disallowed for cross-origin requests.
As you can see in the backend code, the CORS package is already enabled which should take care of CORS errors. I aware that credentials should not be present in URLs, however, what could be take best approach in my situation?
The answer was that instead of redirecting in the backend, the GET request was done using the "required" package and then saved to a variable which was then forwarded back to the frontend.
I'm trying to fetch a page from IMDB, but for some odd reason it gives me error 400 when I'm using request-promise
But the same query works fine if I'm using CURL:
curl "https://www.imdb.com/title/tt6306064/mediaviewer/rm3146075904"
My nodejs code:
async function getMoviePosterImage(mediaViewerUrl) {
const options = {
uri: mediaViewerUrl
};
try {
const mediaViewerHtml = await request.get(options);
return mediaViewerHtml;
} catch (error) {
console.error(error.statusCode);
}
}
await getMoviePosterImage(
"https://www.imdb.com/title/tt6306064/mediaviewer/rm3146075904"
);
Things I have tried so far:
Setting a user agent
Setting keep-alive
Having cookie jar enabled
On my end, I just tried locally and the same error happened for me. Not a definitive answer, but I have a feeling that IMDB protects against web scrapers.
So I am making the web app on top of angular 5.
The problem is when I try to call the api endpoint from the server.
When I get an error response (400+), it seems like on Safari it always throws and breaks the app.
ERROR - TypeError: Type error
ERROR CONTEXT – DebugContext_ {view: Object, nodeIndex: 0, nodeDef: Object, …}
But on Chrome it can handle the error correctly like this.
GET https://api.xxxx.com/projectname/v1.0/validation/access-token 400 (Bad Request)
This is my source code
const baseUrl = environment.apiUrl;
const fullUrl = baseUrl + '/productname/v1.0/validation/access-token';
const headers = new HttpHeaders({
'X-Access-Token': access_token
});
this.http.get(fullUrl, {
headers: headers
}).subscribe((res: any) => {
console.log(res, 'http res');
},
(error: any) => {
console.log(error, 'http err');
});
Anyone has an idea how to fix this?
After a lots of debugging, I figured out the issue that was causing for me. In every request, I was sending the name of the mobile device and for my case it was, Shashank's iPhone.
Calling setRequestHeader with single quote in the header was failing and hence all the HTTP request broke.
I had a Flutter App using an Inapp_Webview that points to an Angular 1.X web application and was also receiving a TypeError for all XHR requests after changing my iOS device name to include an apostrophe.
(*wanted to leave a comment, but didn't have the rep yet)