I am trying to get data from smartsheet API. When I use postman and nodejs in separate server code, it works.
But if I use the API inside the Ionic with HttpClient (#angular/http) it gives CORS issue with run in browser.
Failed to load https://api.smartsheet.com/2.0/sheets/1235941564208899972: 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:8100' is therefore not allowed access.
And also I have tried with a proxy setup like below:
"proxies": [{
"path": "/2.0",
"proxyUrl": "https://api.smartsheet.com/"
}]
home.ts:
let headers = new Headers({ 'Access-Control-Allow-Origin': '*', 'Authorization': 'Bearer xxxxxxxxxxxxxxxxxxxxxxxxxxx' });
let options = new RequestOptions({ headers: headers });
this.HttpClient.get('/2.0/sheets/1235941564208899972', options).pipe(
map(res => res.json())
).subscribe(data => this.response = data);
I am still getting localhost 404 error only.
If Ionic is using CORS to talk to the Smartsheet API, that will not work. The Smartsheet API does not currently support CORS.
Related
I tried to call external API in my API server with axios and it worked. this is the code
const result = await axios.get(
`http://external-api-url-here.com/example-endpoint/xyz`,
{
headers: {
"Content-Type": "application/json",
"App-key": 'ExAmPl3_KeY-H3r3',
"key-platform": 'admin-desktop',
},
}
);
but the problem is when I try the code in my web client application, when it runs in the browser and tries to make a request with the code it doesn't work, getting a 307 response.
Then I added withCredentials: true in the axios header. getting a 401 response,
then I copied cURL from the browser and imported it into postman and it turned out that what made the API response fail was Cookies and Referer. When I remove those 2 key headers from postman, I get response 200.
what is the solution for this?
I want to that code get response 200 at the browser
I am trying to call foreman API from other different domain. But always getting cors origin error. Using ajax and angular but both send the same error.
Actual error:
Access to XMLHttpRequest at
‘https://192.168.x.xxx/api/v2/config_reports/1914’ from origin
‘http://localhost:4200’ 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.
Angular code:
public getReport(){
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET,POST,OPTIONS,DELETE,PUT',
'Authorization': 'Basic ' + btoa('admin:Test123#')
})
};
return this.httpClient.get<object[]>('https://192.168.8.137/api/v2/config_reports/1914', httpOptions);
}
Finally, I found solution. So I have to set cors with foreman-installer.
foreman-installer --foreman-cors-domains http://localhost:4200 /* Your domain name*/
const result = await fetch(https://example.com', {
method: 'POST',
mode: 'no-cors',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({"username": "Jochan","countFollowers": 60001}),
});
I am trying to send a request to a third-party API, an error arrives, how can I solve it?
Error:
POST https://example.com net::ERR_ABORTED 500 (Internal Server Error)
you are not authorized to get a response from an API that does not have the appropriate headers set. If it is neither yours API nor public one, you can only try some hacks with CORS proxies from google search
I'm trying to pass an access token as a header to a GET request into API Gateway, but every time it's returning: "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."
NOTE: I've setup the API Gateway resource with a proxy integration.
exports.handler = async (event) => {
const { access_token } = event.headers
const response = {
statusCode: 200,
headers: getHeaders(),
body: JSON.stringify({
data: access_token,
})
}
return response
}
const getHeaders = () => {
return {
'Access-Control-Allow-Origin': '*',
"Access-Control-Allow-Credentials" : true,
'Access-Control-Allow-Methods': '*',
'Access-Control-Allow-Headers': '*',
'Content-Type': 'application/json'
}
}
I've tried just about every combo returning different headers.
When I try running this request with the access_token as a query parameter it works just fine, it returns as expected, but not when passing as a header.
Something also worth noting, when I pass the access_token as a header through postman it'll return as expected, but when I call it from my UI application on localhost with axios is where it doesn't work.
Any help here would be appreciated.
By adding the following to my template.yml, after deploying SAM adds the OPTIONS method to each of my resource method within API Gateway. I needed to specify my specific header as well in the config, otherwise I would still get the same issue.
Globals:
Api:
Cors:
AllowMethods: "'GET,POST,OPTIONS'"
AllowHeaders: "'access_token,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,X-Amz-User-Agent'"
AllowOrigin: "'*'"
AllowCredentials: "'*'"
For Api Gateway CORS, we need to add an additional OPTIONS method pointing to MOCK integration and with header mappings in integration response with
Access-Control-Allow-Headers should contain all headers
Access-Control-Allow-Methods should contain all methods
Access-Control-Allow-Origin should contain the host or '*'
Example:
Access-Control-Allow-Headers: 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,X-Amz-User-Agent' (should contain all head
Access-Control-Allow-Methods: 'GET,OPTIONS'
Access-Control-Allow-Origin : '*'
Method Response:
Integration Response:
In my NodeJS Express app (built with feathers); I'm trying to work with cookies with client-side fetch from client javascript. I have Express using the cooke-parser middleware.
I have tried setting the credentials header to same-origin, but that has stopped working (it worked fine yesterday, and a few times today... but I've been trying to build up the cookie to what I need and it just doesn't seem to reliably work).
This is my test express route:
app.post('/setjwt', (req, res, next) => {
res.cookie('acokie', 'lol');
res.status(200);
res.send();
});
I'm using fetch in chrome dev tools console to test sending requests like so:
fetch('/setjwt', { method: 'POST', headers: { credentials: 'same-origin' } } );
These are the headers:
But there is no cookie listed in the Application tab nor available in document.cookie.
The reason I have this route is two fold:
Understand how cookies work and interop with Express.
Get rid of this hacky route altogether and get the headers/environment set up correctly so my feathers authentication service's Set-Cookie response header is respected by the browser.
The feathers client on the login page is set up with fetch as its rest implementation, and I can set
fetch('/setjwt', { method: 'POST', headers: { credentials: 'same-origin' } } ); won't work.
The credentials property cannot be specified like that with fetch. The correct code is:
fetch(
'/setjwt',
{
method: 'POST',
credentials: 'same-origin',
headers: { whatever: 'somevalue' }
});
As for setting it up so that the feathers authentication service would work, again, it's not a normal header so brushing up on the documentation hopefully might yield something useful, but I don't think the feathers-rest wrapper over fetch supports passing non header options.