Suresh,
The issue is not on the client side but rather on the server side. The
server cannot accept the request because it is cross domain and has not
been allowed. When you do an HTTP request outside of your local domain,
CORS will perform what is called a "pre-flight check" to see if the request
is allowed. If you look at your console you will notice 2 identical calls
back to back. The first being the pre-flight check and if allowed the
second will have the actual API response. When this happened to me, I also
went crazy trying to figure it out, thinking something was wrong with my
Angular code when in fact it had nothing to do with it, That being said, I
found the easiest way around the issue was to add an .htaccess file to the
API server main root. Of course you need to have access to your API. I
use SlimPHP for my backend API. Some servers will allow you to use the
wildcard * for Access-Control-Allow-Origin but it gave me issues with
Heroku which is the platform we use. I added this to .htaccess. Change
domain1, domain2, domain3 to your allowed domains or remove/add more.
Again you might be good with just the wildcard on that line: Header set
Access-Control-Allow-Origin * If that is the case you can also
remove the SetEnv
and Header merge lines
:
> <IfModule mod_headers.c>
> SetEnvIf Origin
> "http(s)?://(.+\.)?(domain1\.com|domain2\.net|domain3\.com|localhost)(:\d{1,5})?$"
> CORS=$0
> Header set Access-Control-Allow-Origin "%{CORS}e" env=CORS
> Header merge Vary "Origin"
> Header set Access-Control-Allow-Headers "Origin, X-Requested-With,
> Content-Type, Accept, Authorization, X-API-KEY,
> Access-Control-Request-Method, Servi-device-id, Servi-device-type"
> Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE,
> OPTIONS"
> Header set Access-Control-Allow-Credentials true
> </IfModule>
Hope this helps.
On Tue, Jan 8, 2019 at 8:14 AM <[email protected]> wrote:
> Hi Team,
>
> *In my Angular 7 Program:*
>
> *I am trying to access another website URL or some API's of other website
> URL through my Angular 7.*
>
> *I am also trying to access RESTFul Web Services from other Server through
> Angular.*
>
> *I installed "Allow-Control-Allow-Origin: " on my Chrome Browser to
> enable CQRS.*
>
> *I have written a TypeScript Program:*
>
> private _apiUrl = 'api/data/removed remaining content';
>
> constructor(private _http: HttpClient) { }
>
> FunctionY() {
> let headers = new HttpHeaders();
> headers.append('Content-Type','application/json');
> headers.append('Accept', 'application/json');
> headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS,
> DELETE, PATCH, PUT');
> headers.append('Access-Control-Allow-Origin', 'http://Removed URL.org');
> headers.append('Access-Control-Allow-Headers', "X-Requested-With,
> Content-Type, Origin, Authorization, Accept, Client-Security-Token,
> Accept-Encoding");
> headers.append('Access-Control-Allow-Credentials', 'false');
> let options = { headers: headers };
> console.log("options", options);
>
> return this._http.get(this._apiUrl,options).pipe(map(result => result));
>
>
> *Created a file: proxy.conf.json*
>
> {
> "/api": {
> "target": "http://removed URL.org",
> "secure": false,
> "pathRewrite": {
> "^/api": ""
> },
> "changeOrigin": true
> }
> }
>
>
> *Package.json*
>
> "scripts": {
> "ng": "ng",
> "start": "ng serve --proxy-config proxy.conf.json",
> "build": "ng build",
> "test": "ng test",
> "lint": "ng lint",
> "e2e": "ng e2e"
> },
>
>
> *I ran the program using *ng serve* and also using *npm start
>
> *I am able to get the RestFul WebServices from other Server after
> disabling CQRS on my Chrome Browser.*
> *But, I am not able to get the response of another website url or API url
> after disabling CQRS on my Chrome Browser.*
>
>
> *-------------------------------------------------------------------------------------------------------------*
> *I am getting an exception as: *
>
> *Access to XMLHttpRequest at 'URL Removed here' (redirected from
> 'http://localhost:4200/api/data/ <http://localhost:4200/api/data/>') from
> origin 'http://localhost:4200 <http://localhost:4200>' has been blocked by
> CORS policy: No 'Access-Control-Allow-Origin' header is present on the
> requested resource.*
>
> *Error HttpErrorResponse {headers: HttpHeaders, status: 0, statusText:
> "Unknown Error", url: null, ok: false, …}*
>
> *Cross-Origin Read Blocking (CORB) blocked cross-origin response
> https://samples.openweathermap.org/data/2.5/history/city?q=Warren,OH&appid=b6907d289e10d714a6e88b30761fae22/data/2.5/history/city?q=Warren,OH&appid=b6907d289e10d714a6e88b30761fae22
> <https://samples.openweathermap.org/data/2.5/history/city?q=Warren,OH&appid=b6907d289e10d714a6e88b30761fae22/data/2.5/history/city?q=Warren,OH&appid=b6907d289e10d714a6e88b30761fae22>
> with MIME type application/json. See
> https://www.chromestatus.com/feature/5629709824032768
> <https://www.chromestatus.com/feature/5629709824032768> for more details.*
> *---------------------------------------------*
>
> *Can you please let me know how can I get response from both Restful
> Webservices and other Websites or API URLs after disabling CQRS on my
> Chrome? What needs to be done.?*
>
> *Thanks *
> *Suresh*
>
>
> --
> You received this message because you are subscribed to the Google Groups
> "Angular and AngularJS discussion" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To post to this group, send email to [email protected].
> Visit this group at https://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/d/optout.
>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
