I don't manage to read response headers using browser_client.dart :
import 'package:http/browser_client.dart';
var response =
await client.post(url, headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}, body: body);
print('Response headers: ${response.headers}');
Thanks for your help.
The server needs to allow the browser to expose the headers by listing the headers in the Access-control-expose-headers response header, otherwise you can see them in the browser devtools but when you try to read them in code, the browser will suppress them.
See also
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
Why is Access-Control-Expose-Headers needed?
Related
The api is public. Access privallages are to any and everyone.
I've made the same fetch-calls using frameworks such as angular, but on Nextjs I keep running into cors policy errors.
Can someone please explain how I can get the fetch call to work, or provide an example.
I can't fetch from local host as well. There's clearly an error in my practice.
'Access to fetch at '...' from origin 'http://localhost:3000' 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.'
Code example, if helpful:
let fetched =
await fetch('http://127.0.0.1:5001/helloWorld'
, { method: 'GET',
}).then((result)=> console.log('promise complete', result.status));
You need to set mode:'cors'
const response = await fetch(url, {
method: 'GET', // *GET, POST, PUT, DELETE, etc.
mode: 'cors',
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
}
});
I’m calling a service using a token
Failed to load resource: the server responded with a status of 401 (Unauthorized)
Http failure response for http://localhost:65291/api/post: 401 Unauthorized
The same call works in Postman with Headers;
Content-Type: application/json
Authorization: Bearer token
The function in ionic is
getPosts() {
var header = new HttpHeaders({ "Content-Type": "application/json" });
header.append("Authorization", "Bearer " + this.token);
console.log("Bearer " + this.token);
return new Promise(resolve => {
console.log(this.apiUrl + '/post');
this.http.get(this.apiUrl + '/post', { headers: header}).subscribe((data: Post[]) => {
resolve(data);
}, err => {
console.log(err);
});
});
}
Added a log for the token to be sure that is adding it to the header correctly (the token is fine).
The apiUrl variable has value http://localhost:65291/api.
What is wrong here? Cors is enabled… Postman works ok…
Thanks
I think you definitely have client side problem (since its 401 and also you mention Postman works ok).
I had similar issues when I tried to append headers in the same fashion you did so I would suggest trying this (to eliminate this problem):
getPosts() {
// try forming headers object in one go:
let token = "Bearer "+this.token
let headers = new HttpHeaders({
"Content-Type": "application/json",
"Authorization": token
});
// now here I am not sure why you do promise wrapping this way, but then I would suggest:
return this.http.get(this.apiUrl + '/post', { headers: headers })
.toPromise()
.then((data: Post[]) => { // Success
console.log(data);
resolve(data);
}, (err) => {
console.log(err);
});
}
If the problem is still there - please share which version of Angular and Http module you are using?
Also check out this issue here: How to correctly set Http Request Header in Angular 2
And specifically this answer if you are on Angular 4.3+:
How to correctly set Http Request Header in Angular 2
After a while I found the problem,
header.append("Authorization", "Bearer " + this.token); is wrong. It worked using
let headers = new HttpHeaders({"Authorization: " + "Bearer " + this.token})
Setting multiple headers:
this.http
.post('api/items/add', body, {
headers: new HttpHeaders({
'Authorization': 'my-auth-token',
'x-header': 'x-value'
})
}).subscribe()
I had a similar problem, it works on postman and cors enabled but in the app doesn't work, my problem was i have / at the end of the URL in the API security config, and i was making the request without /, i just remove it from request URL,
also you can add /* in security config or put / in your app, the URL must be the same.
(maybe you have solved your issue and it was different issue but this is a possibe solution)
This Meteor server code uses atmosphere HTTP package. I receive human un readable characters from response.content even though characters are readable fine in the browser.
Why and how to fix that? Thanks
const response = HTTP.call(method, url, {
timeout: 30000,
headers: header,
params: Params,
followRedirects: true
}
);
console.log(response.content);
response header has:
'content-type': 'text/html'
'content-encoding': 'gzip'
request header has:
"Accept-Encoding": "gzip, deflate",
"Accept-Language": "en-US,en;q=0.5",
"Content-Type": "application/x-www-form-urlencoded"
I have not been able to get Angular $http to communicate with a remote REST service. I have tried Restangular and $resource too. The problem seems to be with the underlying $http service and CORS limitations. I think I just need to get my headers right. Do I also need to tweak my server config?
I am getting the following error:
XMLHttpRequest cannot load http://www.EXAMPLE-DOMAIN.com/api/v2/users/sign_in. No 'Access-Control- Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
I have researched this a lot. Currently I have tried setting the $httpProvider headings when configuring my app module and played with $http headers. Below is some of my current code.
My Service
app.service('Auth', function($http) {
var headers = {
'Access-Control-Allow-Origin' : '*',
'Access-Control-Allow-Methods' : 'POST, GET, OPTIONS, PUT',
'Content-Type': 'application/json',
'Accept': 'application/json'
};
return $http({
method: "POST",
headers: headers,
url: 'http://www.EXAMPLE-DOMAINcom/api/v2/users/sign_in',
data: {"email":"my#email.com","password":"secret"}
}).success(function(result) {
console.log("Auth.signin.success!")
console.log(result);
}).error(function(data, status, headers, config) {
console.log("Auth.signin.error!")
console.log(data);
console.log(status);
console.log(headers);
console.log(config);
});
});
App Config
var app = angular.module('starter', ['ionic', 'app.controllers', $httpProvider])
.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.headers.common = 'Content-Type: application/json';
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
])
If you are in control of the server, you might need to set the required headers there. Depending on which server, this might help: http://enable-cors.org/server.html
using the WiFlyHQ library i try to send an POST request, it seems like the request header get cropped, if i inspect the request on the server i can see the following:
headers: { host: 'localhost:3000', 'content-type': 'application' },
with this setup;
void SendJasonPacket()
{
wifly.open(Server, ServerPort);
wifly.println("POST / HTTP/1.1");
wifly.println("Host: localhost:3000");
wifly.println("Content-type: application/json");
wifly.println("Accept: application/json");
wifly.println("Content-Length: 93");
wifly.println("User-Agent: easyNAM/0.0.1");
wifly.println("{'checkin':{'device_token': '122','card_token': '12312', 'timestamp': '2012-10-29T14:31:03'}}");
wifly.close();
}
i tried a couple of different headers, that's what i got:
headers: { 'user-agent': 'easyNAM/0.0.1', accept: 'application/j' },
headers: { accept: 'application/json', 'user-agent': 'easyNAM/0' },
headers: { host: 'localhost:3000', 'content-type': 'application' },
it seems, that it get cropped after a specific character count, not sure what i did wrong here....
I believe memory is the issue, i ran into the same issue. I am using VS 2012 to build my app and when it reaches 60% it tends to act sporadically.