I have created a Yammer app in "My Apps" and have set my Javascript Origin to my local development URL:
http://localhost:3000
In my React app, I am trying to use the Fetch API to get some data. For example:
const url = 'https://www.yammer.com/api/v1/messages/following.json';
const options = {
method: 'GET',
mode: 'cors',
headers: {
'Authorization': `Bearer ${process.env.REACT_APP_YAMMER_ACCESS_TOKEN}`,
}
};
fetch(url, options).then(function(response) {
console.log(response);
return response.json();
}).then(function(json) {
console.log(json);
});
I get a CORS error:
Access to fetch at
'https://www.yammer.com/api/v1/messages/following.json' from origin
'http://localhost:3000' has been 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. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.
I have my Javascript Origin set in the Yammer dashboard and I have the mode set to CORS in my fetch request. What am I missing?
I got it working with a different URL:
const url = 'https://api.yammer.com/api/v1/messages.json';
I haven't seen this documented anywhere but I saw someone reference it here on another StackOverflow post.
Related
Im trying to consume TomTom maps api to get the location .
My function :
getLocationAddress(lat: number, lon: number) {
const url = `${baseUrl}search/${versionNumber}/reverseGeocode/${lat},${lon}.json/?key=${apiKey}`;
const headers = new HttpHeaders({
"Content-type": "application/json",
"Access-Control-Allow-Methods": "GET,OPTIONS,POST",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers":
"Access-Control-Allow-Headers,Access-Control-Allow-Methods,Access-Control-Allow-Origin,Authorization,Content-Type",
});
const observable = this.http.get(url, { headers: headers });
return observable;
}
The url is correct and i have provided the headers as above . I cant get past this error:
Access to XMLHttpRequest at <url> has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response
TomTom is a 3rd party api server . The is routed to the correct location and i can see the response from the server on the browser when pasting the link in a new window
Based on the error message it appears your headers are misconfigured, specifically the "authorization" header attribute.
You may want to use their SDK and/or JS libraries, at it will set the headers for you.
You need to provide an API key, otherwise CORS policy will reject the requests, as shown in their examples https://developer.tomtom.com/maps-sdk-web-js/functional-examples#examples,code,vector-map.html
I have successfully added my callback url in my webhooks setup. At that time, the callback url was called successfully with proper logs and everything in the server. But when I click on the TEST button for the respective name (leadgen in this case), nothing AT ALL is being received by the server when in fact it should at least log the very first line. Note that I am using post and get.
Additional note: for NetSuite experienced developers, I am using a suitelet as the callback url for the webhook.
Thanks.
Suitelets that are available externally without login will only work if the User-Agent header in the request mimics a browser. See for example SuiteAnswers # 38695.
I ran into a similar issue, and the workaround was to proxy the request using a Google Cloud Function that simply rewrote the User Agent:
const request = require('request');
exports.webhook = (req, res) => {
request.post(
{
url: process.env.NETSUITE_SUITELET_URL,
body: req.body,
json: true,
headers: {
'User-Agent': 'Mozilla/5',
Authorization: req.headers['authorization'],
},
},
function(error, response, body) {
res.send(body);
}
);
};
I'm trying to fetch data in the browser from a Dropbox link: https://www.dropbox.com/s/101qhfi454zba9n/test.txt?dl=1
Using Axios this works in Node:
axios.get('https://www.dropbox.com/s/101qhfi454zba9n/test.txt?dl=1').then(x => {
console.log('Received correctly')
console.log(x.data);
}).catch(error => {
console.log('Error', error.message);
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(error.request);
}
console.log(error)
});
https://runkit.com/stevebennett/5dc21d04bbc625001a38699b
However it doesn't work in the browser (click the "Console" tab):
https://codepen.io/stevebennett/pen/QWWmaBy
I just get a generic "Network Error". I see the 301 Redirect being retrieved, which seems perfectly normal, but for some reason, it is not followed.
Exactly the same happens with D3: "NetworkError when attempting to fetch resource."
https://codepen.io/stevebennett/pen/KKKoZYN
What is going on?
This appears to be failing because of the CORS policy. Trying this with XMLHttpRequest directly fails with:
Access to XMLHttpRequest at 'https://www.dropbox.com/s/101qhfi454zba9n/test.txt?dl=1' from origin '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
CORS isn't allowed on www.dropbox.com itself.
I'm building a React app and Express API with a "Sign in with LinkedIn" feature. I've got my OAuth sorted, so I have an access token now but I keep getting a CORS issue when I try using it to fetch data. Can I make REST API requests directly from my React app (client side)? Or do I need to proxy every request through my own Express server / API?
useEffect(() => {
// get linkedin data
fetch(`https://api.linkedin.com/v2/me`, {
method: 'get',
mode: 'cors',
headers: {
'Connection': 'Keep-Alive',
'Authorization': `Bearer ${accessToken}`
},
}).then(response => response.json()).then(function(data) {
console.log(data);
});
}, []);
Access to fetch at 'https://api.linkedin.com/v2/me' from origin 'http://localhost:3000' has been 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
In API they call without Authorization is fine.
How to set header for it?
"thanks"
let headers: Headers = new Headers({ 'Authorization': token, 'Content-Type': 'application/json; charset=UTF-8' });`
let options: RequestOptions = new RequestOptions({headers: headers});
let params: URLSearchParams = new URLSearchParams();
params.append('latitude', '23.259933');
params.append('longitude', '77.412615');
params.append('nearby', '5');
return this.http.post(baseUrl, params, options)
.map(
(response: Response)=>{
return response;
}
)
Chrome console:
Response for preflight has invalid HTTP status code 404
This happens because the browser sends the headers of your request to the server before sending the actual request (what is called preflight) so as to verify your request complies with the CORS policy that is defined in the server's configuration.
So what you need to do is double check that the server you are contacting is configured properly to accept the request as you make it.
Make sure that your backend server is accepting not only the POST request but also an OPTIONS request for the same endpoint url. The OPTIONS request should just return with the success 200 code.
On that server you probably have something like "when a user hits endpoint /abc with request type POST, then return some data". You also need something that says "when a user hits endpoint /abc with request type OPTIONS return 200 OK"
If all else fails you could try using this plugin in your browser, but keep in mind this will help only continuing development and is a band-aid solution that won't work in production of course.