Yii2 Cross-Origin Request Blocked WITH ANGULAR2 - rest

Question

Am using angular2 and yii2 restful services but it fails
In yii2 controller i have set
public function behaviors()
{
$behaviors = parent::behaviors();
$behaviors['corsFilter'] = [
'class' => \yii\filters\Cors::className(),
'cors' => [
// restrict access to
'Origin' => ['http://localhost:4200'], //this is my angular2 source
'Access-Control-Request-Method' => ['POST', 'GET','PUT', 'OPTIONS'],
// Allow only POST and PUT methods
'Access-Control-Request-Headers' => ['*'],
// Allow only headers 'X-Wsse'
// 'Access-Control-Allow-Credentials' => true,
// Allow OPTIONS caching
'Access-Control-Max-Age' => 3600,
// Allow the X-Pagination-Current-Page header to be exposed to the browser.
'Access-Control-Expose-Headers' => ['X-Pagination-Current-Page'],
],
];
$auth = $behaviors['authenticator'] = [
'class' => HttpBearerAuth::className(),
'only' => ['can-access','profile'], //access controller
];
$behaviors['authenticator']['except'] = ['options'];
return $behaviors;
}
In angular2 am setting the headers as
get(url) {
let headers = new Headers();
let token = JSON.parse(localStorage.getItem("currentUser")).token;
if (token) {
headers.append('Authorization', 'Bearer ' + token);
headers.append('Content-Type', 'application/x-www-form-urlencoded');
}
let options = new RequestOptions({ headers: headers });
return this.http.get(url, {headers:headers});
}
when i check a post request am getting an error that
Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at
http://127.0.0.1/bcl/api/rest/v1/users/profile.
(Reason: CORS preflight channel did not succeed).
Internet search i found out that i needed to set the cors filters as above but still it fails

Answer 1

As your error states, the browser sent a preflight request, got a list of allowed Origins( in your case it is 'http://localhost:4200') and devided to block your request.
Your request is at "http://127.0.0.1/bcl/api/rest/v1/users/profile" when your Allowed origin is set to "http://localhost:4200".
Change
'Origin' => ['http://localhost:4200'],
to
'Origin' => ['http://127.0.0.1'],

Answer 2

'Origin' => ['http://localhost:4200'],
to
'Origin' => ['*'],