We Keep Coding

Cors error when accessing EBAY User Consent API

I am attempting to follow this EBAY User Consent API article https://developer.ebay.com/api-docs/static/oauth-consent-request.html
but I am getting a CORS error "blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."
I've read numerous Cors posts here this one being a good one: XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header but none of these solutions seem to work.
a pointer in the right direction would be great.
$(document).on('click','.ebay_access', async function(event) {
let scopes = encodeURIComponent("https://api.ebay.com/oauth/api_scope https://api.ebay.com/oauth/api_scope/sell.marketing.readonly https://api.ebay.com/oauth/api_scope/sell.marketing https://api.ebay.com/oauth/api_scope/sell.inventory.readonly https://api.ebay.com/oauth/api_scope/sell.inventory https://api.ebay.com/oauth/api_scope/sell.account.readonly https://api.ebay.com/oauth/api_scope/sell.account https://api.ebay.com/oauth/api_scope/sell.fulfillment.readonly https://api.ebay.com/oauth/api_scope/sell.fulfillment https://api.ebay.com/oauth/api_scope/sell.analytics.readonly https://api.ebay.com/oauth/api_scope/sell.finances https://api.ebay.com/oauth/api_scope/sell.payment.dispute https://api.ebay.com/oauth/api_scope/commerce.identity.readonly https://api.ebay.com/oauth/api_scope/commerce.notification.subscription https://api.ebay.com/oauth/api_scope/commerce.notification.subscription.readonly");
let clientId = "{{env('EBAY_APIKEY')}}";
let clientSecret = "{{env('EBAY_API_CERT_NAME')}}";
let oAuthCredentials64 = btoa(clientId + ":" + clientSecret);
let endpoint = 'https://api.ebay.com/identity/v1/oauth2/token';
try{
let response = await fetch(endpoint,
{
method: "POST",
headers:
{
"Content-Type": "application/x-www-form-urlencoded",
"Authorization": `Basic ${oAuthCredentials64}`
},
body:
"grant_type=client_credentials&scope=" + scopes
}
);
let responseJson = await response.json();
console.log("CLIENT ACCESS TOKEN", responseJson);
} catch(err){
console.log("error: ", err);
};
}); //end function

The request you are making seems to be an authentication request, or "consent request", as eBay call it. This must be made to the authorization endpoint (probably https://api.ebay.com/identity/v1/oauth2/authorize). But you make it to the token endpoint (https://api.ebay.com/identity/v1/oauth2/token), as if it were a token request. But the token request is only the second step ("Exchanging the authorization code for a User access token").
Moreover, neither the authentication request nor the token request are CORS requests:
The authentication request must happen in a visible browsing context, as explained here. The user can only consent if they see what is going on.
The token request is not made by the browser, because this would expose the secret (as pointed out in Jags's answer). It must be made by your server.
In other words: No CORS should be involved at all. The eBay API article explains this correctly.

There are multiple issues here.
In general, if the URL - domain on your browser is not same as the ajax call browser is making then you get this error.
Seems that you have copied the code which was meant for server side execution. You should NEVER expose your credentials to client side. Anyone can use your steal your credentials.
The github link you provided as reference is for server side nodejs application which is running as an app and not under browser.

TypeError on fetch request on "e-raktakosha" web site api

I am new to javascript. I was trying to make an api call.
My code
const options = {
method: 'GET',
headers: {
Authorization: 'Basic dW5kZWZpbmVkOnVuZGVmaW5lZA==',
'content-type': 'application/json',
}
};
fetch(
'https://www.eraktkosh.in/BLDAHIMS/bloodbank/nearbyBB.cnt?hmode=GETNEARBYSTOCKDETAILS&stateCode=21&districtCode=378&bloodGroup=all&bloodComponent=11&lang=0',
options
)
.then((response) => response.json())
.then((response) => console.log(response))
.catch((err) => console.error(err));
but I encountered with an error saying
Error: Failed to fetch
This api call works perfectly with Hoppscotch
If I try to hit the url right on my url bar, it also works fine.
Any help is strongly appreciated. Thank you from Manoranjan

As other People already mentioned, you can't pass a Body when doing a GET HTTP call, instead you can pass Query Params
Notice this part on the URL
hmode=GETNEARBYSTOCKDETAILS&stateCode=21&districtCode=378&bloodGroup=all&bloodComponent=11&lang=0
Still looking into the code it seems the server have a cors policy, look at this sandbox
See this codesandbox -> https://codesandbox.io/s/peaceful-mcclintock-exuzol?file=/src/index.js
Summary:
GET accept body/payload but it could cause errors, see https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET
Using the Web API (new headers, new request) for doing the HTTP call
It is better to just avoid sending payloads in GET requests.

Please don't use body with a get request. The GET request is purely meant to collect back data from server, which allows you to sent Queries, not data on the request. Just remove body:'false' or use body:false. The best way is to remove the body from your request so unexpected input is not sent via this GET request.

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

Adding headers to fetch, solving cors, running cryptojs client side

I'm working on a project where I need first to get a authentication token from a server.
For this I need to send a GET request to the authorisation server with two key-value pairs included in the header: 1/ the client id (const) and 2/ a HMAC SHA1 calculated value based on client ID timestamp and so on.
This is working fine with Postman. (I calculate the sha1 on an online calculator)
Problem 1: (cryptojs client side)
As a node app I included the cryptojs library and the calculation works. But even with RequireJS I can not get cryptojs to run in the browser.
Error: Module name "crypto-js" has not been loaded yet for context: _. Use require([])
Problem 2: (cors)
Apparently chrome refuses the connection as the server does not accept all incoming connections.
Adding mode: 'no-cors' to the fetch request does not solve the problem.
Problem 3: (headers)
I need to add two key - value pairs to the get request headers. In postman this is no problem but I'm not sure this works with append or just adding them to my headers: { }
I constantly get a server error as if no headers where added.
I have already tried REquireJS for the cryptojs problem.
I have added the headers to a myHeaders object
const myHeaders = new Headers();
myHeaders.append('ClientID', CLIENTID);
myHeaders.append('Clientsecret', hashedToken);
and also just added the values to:
headers: {
...
'ClientID': CLIENTID,
'Clientsecret': hashedToken,
}
Both don't seem to help.
My code:
function getToken(){
hashedToken = getHashedSecret(); //this won't work client side as cryptojs can not be loaded
const CLIENTID = "CLIENTID";
const AUTHURL = "https://authorization.server.com/api/CLIENTID/authorization/";
var TIMESTAMP = getTimeStamp();
const myHeaders = new Headers();
// myHeaders.append('Content-Type', 'application/json');
myHeaders.append('ClientID', CLIENTID);
myHeaders.append('Clientsecret', hashedToken);
console.log(myHeaders);
let response = fetch(AUTHURL+TIMESTAMP, {
method: 'GET',
headers: {
myHeaders,
'Accept': 'application/json',
'Content-Type': 'application/json',
'Origin': '',
'Host': 'authorization.server.com',
include: 'ClientID', CLIENTID
},
mode: 'no-cors',
})
.then(response => response.json())
.then(data => {
console.log(data);
document.getElementById('output').innerHTML = data;
})
.catch(error => console.error(error))
console.log('data');
return data;
}
I should get a token from the server

It sounds like https://authorization.server.com doesn't allow access from your page's origin. Remember that in browsers, the Same Origin Policy prevents scripts from one origin from requesting information from other origins by default. (postman, not being a browser, is not subject to this restriction). This is so that scripts on Site A (a malicious actor) can't steal your personal information from Site B (perhaps your online banking) by making requests (from your browser, thus with your authentication information) to Site B.
For this to work, server code at https://authorization.server.com will need to respond to requests from the browser using the Cross-Origin Resource Sharing to allow access from your origin. You cannot do it from your client-side code (for obvious reasons).
Alternately, you can run a server on your origin, make the requests to that server, and it can make the requests to https://authorization.server.com and pass back the responses to you. Your server, not being a browser, is not subject to the SOP.