Error while sending a message to twitch chat with Javascript StreamElements - javascript

I am getting a 400 error when trying to send a message to twitches IRC chat with StreamElements API.
Here is my code so far I know it is incorrect but I don't know how to pass the message to twitch in order for it to accept it. I am learning ajax and will be learning jQuery in the future however if the help could please be in vanilla JS.
var data = {"message": "test"};
var token = "secret"
var xhr = new XMLHttpRequest();
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
console.log(this.responseText);
}
});
xhr.open("POST", "https://api.streamelements.com/kappa/v2/bot/5eab1a7fc644de5b0169703c/say");
xhr.setRequestHeader("accept", "application/json");
xhr.setRequestHeader("content-type", "application/json");
xhr.setRequestHeader("Authorization", `Bearer ${token}`);
xhr.send(data);

XMLHttpRequest is a bit old library to make HTTP request.
Consider using the new fetch API in (vanilla) JavaScript.
var data = { message: "test"};
var token = "secret"
await fetch('https://api.streamelements.com/kappa/v2/bot/5eab1a7fc644de5b0169703c/say', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => {
console.log(result)
})
.catch(err => {
console.log(err)
})

Related

fetch Microsoft bearer token not working from the browser

I am trying to implement that
https://learn.microsoft.com/en-us/graph/auth-v2-service?view=graph-rest-1.0
Its working from node and postman but not the browser
This was copied from postman
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
myHeaders.append("Cookie", "fpc=blabl; stsservicecookie=estsfd; x-ms-gateway-slice=estsfd");
var urlencoded = new URLSearchParams();
urlencoded.append("client_id", "bla-bla");
urlencoded.append("scope", "https://graph.microsoft.com/.default");
urlencoded.append("client_secret", "bla-bla");
urlencoded.append("grant_type", "client_credentials");
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: urlencoded,
redirect: 'follow'
};
fetch("https://login.microsoftonline.com/blabla/oauth2/v2.0/token", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
Any ideas what i should include or omit in the fetch request?
The code above will not work in the browser. This code above needs to be executed on the server (you are using "client secret").
If you want browser-only (SPA) authorization, consider using PKCE authorization flow instead.
Other than that, the code looks okay, there is nothing wrong with it.

Trying to access JSON endpoint using Javascript with X-Auth-Token leads to error

I am trying to access a JSON endpoint using Javascript with X-Auth-Token but I’m keeping getting error. It’s JSON for a sports API and I’ve followed every instruction in the documentation and code seems to correct to my knowledge however, I can’t spot the problem.
var main = function() {
var url = "https://api.football-data.org/v4/teams/86/matches?status=SCHEDULED";
var xhr = new XMLHttpRequest();
xhr.open("GET", url, false);
xhr.setRequestHeader("X-Auth-Token", "601a163917fe417da759316ced98462d");
xhr.send(null);
var data = JSON.parse(xhr.responseText);
return data;};
You need to set the request mode to no-cors for it to allow cross-origin resource sharing.
Try doing this.
var myHeaders = new Headers();
myHeaders.append("X-Auth-Token", "your token");
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow',
mode: 'no-cors'
};
fetch("https://api.football-data.org/v4/matches?status=FINISHED", requestOptions)
.then(result => console.log(result))
.catch(error => console.log('error', error));
Hope it helps.

Post request to the firebase cloud functions gives error 500

I have a POST request to the Cloud Functions on Firebase. When I'm trying to make a request, I get a CORS policy error. Ok, I set mode: 'no-cors' and get Failed to load resource: the server responded with a status of 500 ().
Here is the code
let myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Accept", "application/json");
let raw = JSON.stringify({
"description": "Test item",
"email": "testemail#gmail.com"
});
let requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
mode: 'no-cors',
redirect: 'follow',
};
fetch("https://someURl.cloudfunctions.net/someRequest", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
The code is copied from Postman
Any ideas?
As confirmed by jaba, the issue was on server side. Also, same has been documented here.

Connecting to an API from my localhost throws http/2 error

I am connecting to an API. It works fine when I use Postman. But When I use the code generated from postman in my angular project ( on my localhost ) I cannot perform the requests. I get an error: net::ERR_HTTP2_PROTOCOL_ERROR instead of an error code in my browser. The fetch code I use:
let code = params.get('code');
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Host", "login.eveonline.com");
myHeaders.append("Authorization", "Basic NThmYjljMGEwMWM5NGI1ODhkNmUzYzVlMTQ4NjYyYjQ6eVRUUzFGRTdUtZTzBNZkpCZw==");
let body = {
grant_type: "authorization_code",
code: code
};
fetch("https://login.eveonline.com/v2/oauth/token", {
method: 'POST',
headers: myHeaders,
body: JSON.stringify( body )
})
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));

Set header on Axios [duplicate]

This question already has answers here:
Axios Http client - How to construct Http Post url with form params
(5 answers)
Closed 3 years ago.
I'm trying to POST on an API but Axios.post keeps failing, while XHR works. I know I have to set the request's headers with UTF-8 but it seems Axios is not recognizing it.
I know I need to set 'application/x-www-form-urlencoded; charset=UTF-8' on my header request for this is API was made in Flask and the owner did not configure this part of it. (And because it works with XHR).
The code working is:
const post = (url, params) => {
const http = new XMLHttpRequest();
http.open("POST", url, true);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
http.onreadystatechange = () => {
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);
};
So I googled to know how translante #setRequestHeader to Axios.post() and found these links: https://github.com/axios/axios/issues/858 and https://github.com/axios/axios/issues/827.
Then I tried something like this:
const headers = {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
};
const post = ({ data, endpoint }) => axios
.post(endpoint, data, { headers })
.then(request => request.data);
This:
const headers = {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
};
const post = ({ data, endpoint }) => axios
.post(endpoint, data, headers)
.then(request => request.data);
And this:
const headers = {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
};
const post = ({ data, endpoint }) => axios({
method: "post",
url: endpoint,
data,
headers
}).then(request => request.data);
But every single one of then failed with an error 400.
So, how should I translate http.setRequestHeader() to Axios?
Try the code below.
From https://github.com/axios/axios/issues/858
const endpoint = 'http://localhost/test.php'; // eg.
axios.post(endpoint,
querystring.stringify({
paramter: 'value',
}),
{
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
});

Categories

Resources