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*/
Related
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:
I'm working on a small nodejs-express-react app. I'm sending a request against the Google Analytics Management API server-side then trying to fetch the response from the client-side. It doesn't work as the Status Code of the fetch is Status Code: 405. however, I'm seeing that the fetched URL is not the same as the requested URL. I don't understand what is wrong exactly.
I'm fetching /auth/google/callback but according to the network information and looking at the error the url requested is https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A5000%2Fauth%2Fgoogle%2Fcallback&client_id=XXXXXXX-XXXXXXX.apps.googleusercontent.com
Here is the full error:
Access to fetch at 'https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A5000%2Fauth%2Fgoogle%2Fcallback&client_id=XXXXXXXX-XXXXXXXX.apps.googleusercontent.com' (redirected from 'http://localhost:5000/auth/google/callback') from origin 'http://localhost:5000' 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 this on the server-side:
app.get(
"/auth/google",
passport.authenticate("google", { scope: ['Profile','https://www.googleapis.com/auth/analytics.readonly'] })
);
app.get(
"/auth/google/callback",
passport.authenticate("google", { failureRedirect: "/error", session: false }),
function(req, res) {
var token = req.user.token;
request('https://www.googleapis.com/analytics/v3/management/accounts?access_token=' + token,
function (error, response, body) {
console.log(JSON.parse(body).items);
res.send({data:JSON.parse(body).items})
});
}
);
And this on the client-side:
componentDidMount() {
fetch('/auth/google/callback', {
method: 'GET',
withCredentials: true,
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'},
credentials: 'same-origin'
})
.then(res => res.json())
.then(user => this.setState({ data: data }));
}
How should I structure my node/express back-end so I can make the react-side fetch work correctly?
EDIT: I've added 'Access-Control-Allow-Origin': '*' in the header but still got the error.
fetch('/auth/google/callback' requires a full URL (for example https://localhost:8080/auth/google/callback)
EDIT
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
}
I want to send a get request but I need to insert my api key in to a 'x-api-key' header. I am using NodeJS + Express. Right now i'm using fetch from the "isomorphic unfetch" lib:
https://github.com/developit/unfetch/tree/master/packages/isomorphic-unfetch
I use it in order to fetch data from the get request. I use this library specially because it works well on both the server and a client.
How should I add the header to my request? Thanks!
There's an example in the unfetch repository that shows how to add headers to fetch requests.
// complex POST request with JSON, headers:
fetch('/bear', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': 'Bearer XYZ'
},
body: JSON.stringify({ hungry: true })
}).then( r => {
open(r.headers.get('location'));
return r.json();
})
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.