We Keep Coding

Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response when using http get req from JS to SlackAPI

I understand that there are many similar questions, but I am posting this because I feel it is slightly different.
I am trying to send a GET request to the Slack API using an HTTP request.
Specifically, the code looks like the following.
import useSWR from "swr";
const useSlackSearch = (query: string) => {
const token = process.env.NEXT_PUBLIC_SLACK_API_USER_TOKEN;
const myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer " + token);
const slackURL = `https://slack.com/api/search.messages?query=${query}`;
const fetcher = async (url: string) => {
const response = await fetch(url, {
headers: myHeaders,
}).then((res) => res.json());
return response;
};
const { data, error } = useSWR(slackURL, fetcher, {
revalidateOnFocus: true,
revalidateOnReconnect: true,
});
if (error) {
return console.log(`Failed to load: ${error}`);
} else if (!data) {
return console.log("Loading...");
} else {
console.log(data);
return data;
}
};
export default useSlackSearch;
The environments I'm using are as follows.
Device: MacBook Air
OS: macOS
Browser: Chrome
From: localhost:3000
To: Slack API html page (https://slack.com/api/search.messages)
After reading the MDN articles like below, I understood that
There is such a thing as a simple HTTP request as defined by MDN
If the request you want to send does not correspond to this simple request, the browser will send a preflight request
In the response to that preflight request, there is a header called Access-Control-Allow-Headers.
Only headers set to the value of this Access-Control-Allow-Headers header can be used as headers in the main request after preflighting.
In this case, I tried to use the Authorization header, but it was trapped by the above restriction.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests
https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request
That's all I understand.
However, on the official Slack API page for the method in question, it says to specify the token in the Authorization header, so I'm having trouble.
I also don't understand how to specify the Access-Control-Request-Headers in the preflight header, as described in another questioner's thread. The reason is that the only thing that communicates to the Slack API is the browser in this case, and the only relevant source is JavaScript (React / Next.js to be exact)!
After that, I found preflight response from Slack API as follows;
access-control-allow-headers: slack-route, x-slack-version-ts, x-b3-traceid, x-b3-spanid, x-b3-parentspanid, x-b3-sampled, x-b3-flags
As I thought, I understand that Authorization is not allowed because it is not included as a value. So the question is how to solve it.
Furthermore, I found out later that the preflight request from the browser properly declared that it wanted to use Authorization as an actual request header. However, the preflight response did not contain the value.

Following CBroe's advice, I was able to contact the Slack help center directly, so I asked this problem. What I found out as a result is that HTTP requests from browsers are not supported as of the end of February 2022. Of course, they have received quite a lot of requests regarding this, so they hope to address it at some point.
This time, the browser sent Access-Control-Request-Headers:Authorization in the preflight request. But the Slack API server side did not allow the Authorization header in the request from the browser. Therefore, Authorization was not set in the Access-Control-Allow-Headers in the preflight response from the Slack API side.
As a result, the response from the Slack API side returned Invalid Auth, even though Authorization was added as a header when making an actual request from the browser.
Through this error, I gained a deeper understanding of HTTP requests such as CORS and preflighting, but since it is not explicitly written on the official Slack website, I left it here.
What is Preflight: https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request
What is Access-Control-Allow-Header: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers
What is CORS simple request: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests

I could not get the Authorization header to work either. However, Slack provided this example for adding token authentication to the Post body following the deprecation of the query parameters method.
This worked for me to make Web API calls to Slack from the browser (for testing) so that Slack would read the token for authentication. Note, according to Slack's best practices for security, user and bot tokens should be stored with care and not used in client-side Javascript:
try {
const res = await fetch("https://slack.com/api/conversations.list", {
method: "POST",
body: `token=${TOKEN}`, // body data type must match "Content-Type" header
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
}).catch((error) => {
console.log(error);
});
if (!res.ok) {
throw new Error(`Server error ${res.status}`);
} else {
const data = await res.json();
console.log(data);
}
} catch (error) {
console.log(error);
}

using token in request body instead of Authorization header worked for me.
axios({
method: 'post',
url: 'https://slack.com/api/chat.postMessage',
data: `text=Hi&channel=D048GGYTJUK&token=${process.env.TOKEN}`
})

Error 400 receieved when fetching from trovo API

I've been granted acces to an API that uses OAuth 2, I've tried it with different API's and my requests were working.
However with the trovo API I seem to get error 400 at every endpoint.
I also get a "blocked by CORS policy: o 'Access-Control-Allow-Origin' header is present on the requested resource."
function fetching() {
fetch("https://open-api.trovo.live/openplatform/validate", {
"method": "GET",
"headers": {
"Accept": "application/json",
"Authorization": "myKey",
"Client-Id": "myID"
}
})
.then(response => {
console.log(response.json());
})
.catch(err => {
console.error(err);
});
}
I also recieved a Client Secret not sure what to do with that.
Here is the documentation from Trovo: https://developer.trovo.live/docs/APIs.html
Altogether I'm quite new to working with API's.

The OAuth flow requires a server, and cannot be done entirely on the front-end. In this example, you would need a server running somewhere other than StreamElements that would keep track of the access and refresh token.
You would then have the front end connect to the server to get the access token instead of directly to Trovo. Reason for this: security. To get the access token you need the private key, and you don't want to be sending that to the front end, or else they can do stuff as if they were you.
Even though stream overlays don't seem like a front end, it's most often just a browser being rendered, as if you just had a website open in chrome.
https://www.digitalocean.com/community/tutorials/an-introduction-to-oauth-2
https://www.youtube.com/watch?v=3pZ3Nh8tgTE

AJAX - Response to preflight request doesn't pass access control check

I am try to do a technical test for an interview and have hit a snag with fetching some data from an API. The error message im getting is this:
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
Here is my request:
function handleErrors(response) {
if (!response.ok) {
throw Error(response.statusText);
}
return response;
}
fetch('https://rss.itunes.apple.com/api/v1/us/apple-music/top-albums/all/100/non-explicit.json', {
headers: {
"Access-Control-Allow-Origin": "*",
"Content-Type": "application/json"
}
})
.then(handleErrors)
.then((response) => response.json())
.catch((e) => {
throw Error(e);
});
After googling the issue the majority of answers seem to suggest you need to add: Access-control: Allow-Origin to the resource to enable CORS. I obviously don't have access to do that on iTunes API so I am wondering if there is another way around it.
The get request works fine in postman and returns me the data that I need so i'm wondering if it's one of my request headers thats not being set properly?
Apparently other people have managed to complete the test so i'm quite sure there is something wrong with my request.

Resolving CORS issue in Angular (without access to API)?

I have the following problem:
In my Angular 4 App I want to get (GET Request) data from a public API.
Just calling the URL from Browser or via Postman works perfectly but when I make an HTTP Get request from Angular I get that error:
XMLHttpRequest cannot load https://api.kraken.com/0/public/AssetPairs.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'localhost:4200' is therefore not allowed
access.
I found solutions for that but none of them resolved my issue as it is a third party API and not under my control...
I also tried setting headers but it didn't work:
let headers = new Headers({ 'Access-Control-Allow-Origin': 'true' , 'Content-Type':'application/json', 'crossDomain':'true'});
let options = new RequestOptions({ headers: headers, withCredentials: false});
return this.http.get('https://api.kraken.com/0/public/AssetPairs' , options)
.map(
(response: Response) => {
console.log(response);
const markets = response.json();
return markets;
},
(error: Error) => {
console.log('error');
console.log(error);
}
);
Thanks in advance for advice!

I suggest you to use proxy-server. You can access your third part resources though proxy server. For instance you put nginx server and add cors configuration in the nginx.conf. Angular request direct to nginx which then reroute to your third part resources.

Access-Control-Allow-Origin Error Workaround - No Access to Server

I'm getting the following error using AJAX to call an API on UPS
XMLHttpRequest cannot load https://wwwcie.ups.com/rest/Ship. Response to
preflight request doesn't pass access control check: No 'Access-Control-Allow-
Origin' header is present on the requested resource. Origin
'http://localhost:63786' is therefore not allowed access.
AJAX Call:
$.ajax({
url: "https://wwwcie.ups.com/rest/Ship",
type: "POST",
dataType: 'json',
crossDomain: true,
contentType: 'application/json',
data: JSON.stringify(message),
success: function (result) {
//code to execute on success
}
error: function (result) {
//code to execute on error
}
})
I have no control over the API server so I cannot modify the headers being sent back. I've tried JSONP, changing the headers I send, and a number of other solutions to no avail. I've read that making a server-side proxy could be a possible fit but I'm not sure how I would go about this. Any advice/code samples on possible solutions would be greatly appreciated. Thanks in advance.

What is to stop a malicious website from sending requests to your bank's web app and transferring all of your money? To prevent these types of shenanigans, if you're using a web browser, the server must explicitly state which remote origins are allowed to access a certain resource, if any.
If you need a key to access it, then CORS probably isn't enabled. You can always double check by looking at the response headers. See this:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
So as others have already mentioned, you can get around this by making the request from your own server (where the headers don't identify it as a browser and subject to CORS limitations), and proxy it to your client side app.
Assuming you're using Node/Express, something like this should work:
const express = require('express');
const app = express();
const myHeaders = new Headers();
const myInit = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' };
app.get('/ups/stuff/stuff', (req, res) => {
fetch('/ups/api/stuff', myInit)
.then(response => response.json())
.then(json => res.json(json);
});
app.listen(3000);
The native fetch API is neat because you can use it on both client and server, and it supports promises like jQuery.
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch