# Access to XMLHttpRequest at 'https://authapistaging2.mymonow.com/api/auth/token/create' from origin 'http://localhost:8101' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

**URL:** <https://forum.ionicframework.com/t/access-to-xmlhttprequest-at-https-authapistaging2-mymonow-com-api-auth-token-create-from-origin-http-localhost-8101-has-been-blocked-by-cors-policy-no-access-control-allow-origin-header-is-present-on-the-requested-resource/195858>\
**Category:** Ionic Angular\
**Created:** [September 8, 2020, 9:29am UTC](https://forum.ionicframework.com/t/access-to-xmlhttprequest-at-https-authapistaging2-mymonow-com-api-auth-token-create-from-origin-http-localhost-8101-has-been-blocked-by-cors-policy-no-access-control-allow-origin-header-is-present-on-the-requested-resource/195858 "2020-09-08T09:29:54Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Muhammad-Afzal](https://avatars.discourse-cdn.com/v4/letter/m/50afbb/32.png) [@Muhammad-Afzal](https://forum.ionicframework.com/u/Muhammad-Afzal)\
**Post date:** [September 8, 2020, 9:29am UTC](https://forum.ionicframework.com/t/access-to-xmlhttprequest-at-https-authapistaging2-mymonow-com-api-auth-token-create-from-origin-http-localhost-8101-has-been-blocked-by-cors-policy-no-access-control-allow-origin-header-is-present-on-the-requested-resource/195858/1 "2020-09-08T09:29:54Z")

</div>

authservice.ts

import { Injectable } from ‘@angular/core’;  
import {HttpClient, HttpHeaders} from ‘@angular/common/http’;  
const apiUrl = ‘[https://authapistaging2.mymonow.com/api/auth/token/create](https://authapistaging2.mymonow.com/api/auth/token/create)’;  
@Injectable({  
providedIn: ‘root’  
})  
export class AuthService {

constructor(public http: HttpClient) { }  
con(data: any) {  
// tslint:disable-next-line: no-shadowed-variable  
const headers = new HttpHeaders();  
headers.set(‘Access-Control-Allow-Origin’, ‘\*’);  
headers.set(‘Access-Control-Allow-Methods’, ‘GET,HEAD,PUT,PATCH,POST,DELETE’);  
// tslint:disable-next-line:no-debugger  
debugger;  
return new Promise((resolve, reject) =\> {  
// tslint:disable-next-line: whitespace  
this.http.post(apiUrl, JSON.stringify(data)).  
subscribe(res =\> {  
// tslint:disable-next-line: whitespace  
resolve(JSON.stringify(res));  
}, (err) =\> {  
reject(err);  
});  
});  
}  
getdata(type: any) {  
// tslint:disable-next-line: no-shadowed-variable  
return new Promise((resolve, reject) =\> {  
// tslint:disable-next-line: whitespace  
this.http.get(apiUrl+type).  
subscribe(res =\> {  
resolve(JSON.stringify(res));  
}, (err) =\> {  
reject(err);  
});  
});  
}  
}

login.page.ts

import { Component, OnInit } from ‘@angular/core’;  
import {AuthService} from ‘…/provider/auth.service’;

@Component({  
selector: ‘app-logup’,  
templateUrl: ‘./logup.page.html’,  
styleUrls: [’./logup.page.scss’],  
})  
export class LogupPage implements OnInit {

constructor(private auth: AuthService) { }  
data = { login: ‘’, DialingCode: ‘’, MobileNumber: ‘’, Password: ‘’ };  
ngOnInit() {  
}  
login() {  
this.auth.con(this.data).then((res) =\> {  
console.log(res);  
}  
);  
}  
}

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 9, 2020, 6:43pm UTC](https://forum.ionicframework.com/t/access-to-xmlhttprequest-at-https-authapistaging2-mymonow-com-api-auth-token-create-from-origin-http-localhost-8101-has-been-blocked-by-cors-policy-no-access-control-allow-origin-header-is-present-on-the-requested-resource/195858/2 "2020-09-09T18:43:49Z")

</div>

Don’t:

- [needlessly construct `Promise`s](http://bluebirdjs.com/docs/anti-patterns.html)
- do anything with custom HttpHeaders here
- abuse `any` out of laziness
- manually unmarshal and marshal JSON when dealing with `HttpClient`
- use `providedIn: 'root'`

Do:

- deal with CORS issues on the server side
- [use codefences](https://forum.ionicframework.com/t/google-maps-autocomplete-integration/195640/23) when posting
- give methods descriptive names (as opposed to `con`)
- give proper types to all function parameters and return values
- follow [coding conventions](https://google.github.io/styleguide/jsguide.html#naming-rules-by-identifier-type) when it comes to capitalization: `DialingCode` is a class, not an object member name

---

<div class="post-metadata">

**Author:** ![Muhammad-Afzal](https://avatars.discourse-cdn.com/v4/letter/m/50afbb/32.png) [@Muhammad-Afzal](https://forum.ionicframework.com/u/Muhammad-Afzal)\
**Post date:** [September 14, 2020, 5:00am UTC](https://forum.ionicframework.com/t/access-to-xmlhttprequest-at-https-authapistaging2-mymonow-com-api-auth-token-create-from-origin-http-localhost-8101-has-been-blocked-by-cors-policy-no-access-control-allow-origin-header-is-present-on-the-requested-resource/195858/3 "2020-09-14T05:00:27Z")

</div>

i solve that issue using advanceHTTP plugin Provided by ionic