Getting the cors error when sending the request, but working in the postman
Error Message:
Access to fetch at (cloud function url) from origin (my web app) has
been blocked by CORS policy: 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.
Cloud Function Code:
exports.add_edit_location_routes = functions.https.onRequest((request, response) => {
let obj = request.body
deletePreviousRoutes(obj.assign_route_id, obj.driver_id, () => addRoutes(obj, (msg) => {
response.send(msg)
}))
})
Request:
fetch("url", {
body: JSON.stringify(json),
method: "POST",
headers: {'Content-Type': 'application/json'},
}).then(res => res.json()).then(obj => console.log(obj))
added this but still not working
res.set('Access-Control-Allow-Origin', '*')
Try including the code you provided in the Cloud Function and not the fetch request.
exports.add_edit_location_routes = functions.https.onRequest((request, response) => {
let obj = request.body
response.set('Access-Control-Allow-Origin', '*')
deletePreviousRoutes(obj.assign_route_id, obj.driver_id, () => addRoutes(obj, (msg) => {
response.send(msg)
}))
})
Related
I have configured my code in this manner on my express backend and have the cors library installed.
I am however getting this error:
Access to fetch at 'mybackend.com' from origin 'domain1.com' has been blocked by CORS policy: 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.
How can I solve this?
My backend and frontend code are as below respectively
const allowedDomains = [
'domain 1',
'domain 2',
];
app.use(cors(
{
origin: function (origin, callback) {
if (allowedDomains.indexOf(origin) != -1) {
callback(null, true);
} else {
callback(new Error(`Access has been blocked `));
}
},
credentials: true,
}
));
await fetch(`mybackend.com' ,{
method:'GET',
headers: new Headers({
'Content-Type':'application/json',
'Authorization':`Bearer ${token}`,
}),
body:null,
})
As per my limited understanding of Fetch API and CORS, I think you have to add mode: 'cors' as well as the header Access-Control-Allow-Origin: '*' or Access-Control-Allow-Origin: 'mybackend.com'. After doing that, your await fetch(...) block would look something like this.
fetch(URL, {
mode: 'cors',
method:'GET',
headers: {
'Access-Control-Allow-Origin':'*',
'Content-Type':'application/json',
'Authorization':`Bearer ${token}`,
},
body:null,
})
.then(response => response.json())
.then(data => { ... });
Hope this helps!
How do i fix this?
let response = await fetch("https://www.cloudflare.com/cdn-cgi/trace", {
// credentials: 'include',
method: 'GET',
// method: 'POST',
headers: {'Content-Type': 'application/json'}
})
Access to fetch at 'https://www.cloudflare.com/cdn-cgi/trace' from
origin 'http://localhost:3000' has been blocked by CORS policy:
Request header field content-type is not allowed by
Access-Control-Allow-Headers in preflight response.
You can try do it like this:
async function test () {
let response = await fetch("https://www.cloudflare.com/cdn-cgi/trace", {mode: "cors"});
let text = await response.text();
console.log(text)
}
test()
My API has following CORS setup:
(I am the owner, I can change these settings)
Middleware function:
// HeaderMiddleware ...
func HeaderMiddleware(next httprouter.Handle) httprouter.Handle {
return httprouter.Handle(func(w http.ResponseWriter, r *http.Request, p httprouter.Params) {
w.Header().Set("Content-Type", "application/json")
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Set("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, X-APIKEY")
// ! Production
// if r.Header.Get("X-APIKEY") != "fdfdsf5df6d541cd6" || r.RemoteAddr != frontendURL {
// w.WriteHeader(http.StatusForbidden)
// json.NewEncoder(w).Encode(NoContentResponse{Success: false, Error: "You aren't allowed to request the api here."})
// return
// }
// ! Production
next(w, r, p)
})
}
The X-APIKEY header is not necessary yet, a request without it just works fine:
fetch('http://localhost:8013/tobi#gmx.at/usage', { headers: { } })
.then(response => response.json())
.then(console.log)
returns {used: false} (expected response)
However, if I add the X-APIKEY header:
fetch('http://localhost:8013/tobi#gmx.at/usage', { headers: { 'X-APIKEY': 'sdfsdfsafsf' } })
.then(response => response.json())
.then(console.log)
following error is thrown:
Access to fetch at 'http://localhost:8013/tobiwibu#gmx.at/usage' from origin 'http://localhost:8080' 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.
If I do the request with the X-APIKEY header in Postman, it says that the Access-Control-Allow-Origin header is sent along:
P.S.: I already tried other headers, it works!
If I do the request with chrome (without X-APIKEY header), the Access-Control-Allow-Origin header is sent.
Thanks for your help!
I've now fixed it like this:
I misuse the http Accept header for my API-Token.
Example:
fetch('http://10.0.0.11:8013/lopm#htl/usage',
{"headers":{ "Accept": "fdfdsf5df6d541cd6++" }})
.then(response => response.json())
.then(console.log)
Of course, this isn't a really nice solution, but it does its job.
Thanks for all of you for giving me helpful tips!
I am getting this error:
"No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'my origin' is therefore not allowed access."
Backend:
after((request, response) -> {
response.header("Access-Control-Allow-Origin", "*");
response.header("Access-Control-Request-Method", "*");
response.header("Access-Control-Allow-Headers", "*");
response.type("application/json");
});
Frontend:
async req() {
let request_url = ***my url***;
let init = {
method: "post",
body: { **my body content** }
};
const res = await fetch( request_url , init );
}
I'm trying to use the forecast API with my angular2 app. However, when i try to access the API I get a Cross-Origin Error. Any idea how i can fix this error ?
search(latitude: any, longitude: any){
console.log(latitude);
console.log(longitude);
let body = 'https://api.forecast.io/forecast/APIKEY/'+latitude+','+longitude ;
console.log(body);
this.http.get(body)
.map(
response => response.json()
).subscribe(
data => console.log("Data: "+data),
err => console.log("Error: "+err),
() => console.log('Get Complete')
);
}
Error
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.forecast.io/forecast/APIKEY/37.8267,-122.423. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
Update
Now using JSONP
let body = 'https://api.forecast.io/forecast/APIKEY/'+latitude+','+longitude + '?callback=?' ;
console.log(body);
this.jsonp.get(body)
.map(response => response.json())
.subscribe(
data => console.log("Data: "+data),
err => console.log("Error: "+err),
() => console.log('Get Complete')
);
Error
Error0.def29191127bbc3e0100.hot-update.js:59:10
Object { _body: "JSONP injected script did not invok…", status: 200, ok: true, statusText: "Ok", headers: Object, type: 3, url: "https://api.forecast.io/forecast/60…" }0.def29191127bbc3e0100.hot-update.js:61:10
SyntaxError: expected expression, got '==='
For forecast.io, you should use JSONP. The easiest way to do this using jQuery is adding ?callback=? to request URL:
$.getJSON('https://api.forecast.io/forecast/<API KEY>/' + latitude + ',' + longitude + "?callback=?", function(data) {
console.log(data);
});
I am no expert on Angular 2 but reading the docs it looks like you need to import the Jsonp and then add a callback. More documentation here -- see the section app/wiki/wikipedia.service.ts.
I think something like the code below will work for you
let body = "https://api.forecast.io/forecast/<API KEY>/' + latitude + ',' + longitude + '?callback=?'";
return this.jsonp
.get(body)
.map(response => <string[]> response.json()[1]);
Check out the cors bits on angular.io
https://angular.io/docs/ts/latest/guide/server-communication.html#!#cors
Something like the below (from above)
return this.jsonp
.get(wikiUrl, { search: params })
.map(response => <string[]> response.json()[1]);
You are getting this problem because the header you are sending does not match the headers in the backend.
Suppose you send the following headers:
contentHeaders = new Headers();
contentHeaders.append('Authorization', 'Your token used in app');
contentHeaders.append('Content-Type', 'application/json');
contentHeaders.append('Access-Control-Allow-Origin', '*');
So those headers like Authorization, Content-type, and Access-Control-Allow-Origin should match the allowed headers in your backend.
So in the backend Access-Control-Allow-Headers should have all above headers:
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Authorization, content-type, Access-Control-Allow-Origin");
So here in Access-Control-Allow-Headers you have to pass all headers which you send from frontend: 'Authorization', 'Content-type', and 'Access-Control-Allow-Origin'.
It will work perfectly when you use above concept.
Hope this post will helpful for you
Thanks