While making a Http GET call, Getting "OPTIONS https://riskassessmentidtypes.px-npe01.com/customer-credit/ 0 ()"

Question

I am working on one Internal Project with Angular 5. Here, we are trying to make Http GET call to one URL which is present in PCF environment. While making this call, i am getting below Console Message:

OPTIONS https://riskassessmentidtypes.px-npe01.com/customer-credit/ 0 ()

ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", …}

My Code: processrequest.component.ts

this.httpService.getDetails(url, data).subscribe(
        res => {
          this.loading = false;
          console.log("response-----" + res);
          this.serviceresponsetime = new Date().getTime() - startFrom;
        },
        error => {
          this.loading = false;
          console.log(error);
          this.serviceresponsetime = new Date().getTime() - startFrom;
          //util.parseServiceResponse(error, false);
          //this.responseData = util.responseData;
        }
      );

http.service.ts

@Injectable()
export class HttpService {

  data: any;

  headers = new Headers();

  constructor(private http: Http) {
    this.headers.append('Content-Type', "application/json");
    this.headers.append('Accept', "application/json");
    this.headers.append('senderid', "dsd");
    this.headers.append('applicationid', "adsd");
    this.headers.append('servicetransactionid', "asds");
    this.headers.append('channelid', "asdsd");
  }

  // get service call
  getDetails(url, params) {
    console.log("http service - inside getDetails function");

    let options = new RequestOptions();
    options.headers = this.headers;

    if (params) {
      options.params = params;
    }

    return this.http.get(url, options)
      .map((response) => response.json())
      .catch((error: any) => Observable.throw(error.json() || 'server error'));
  }

Thanks a lot in advance. As i am new to Angular, so i am stuck here. Please find below the Error:

OPTIONS https://riskassessmentidtypes.px-npe01.com/customer-credit/ 0 ()
scheduleTask @ polyfills.bundle.js:5050
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ polyfills.bundle.js:2488
onScheduleTask @ polyfills.bundle.js:2378
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ polyfills.bundle.js:2482
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ polyfills.bundle.js:2313
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMacroTask @ polyfills.bundle.js:2336
scheduleMacroTaskWithCurrentZone @ polyfills.bundle.js:3195
(anonymous) @ polyfills.bundle.js:5082
proto.(anonymous function) @ polyfills.bundle.js:3475
(anonymous) @ vendor.bundle.js:108570
webpackJsonp.../../../../rxjs/_esm5/Observable.js.Observable._trySubscribe @ vendor.bundle.js:2604
webpackJsonp.../../../../rxjs/_esm5/Observable.js.Observable.subscribe @ vendor.bundle.js:2592
webpackJsonp.../../../../rxjs/_esm5/operators/map.js.MapOperator.call @ vendor.bundle.js:20860
webpackJsonp.../../../../rxjs/_esm5/Observable.js.Observable.subscribe @ vendor.bundle.js:2589
webpackJsonp.../../../../rxjs/_esm5/operators/catchError.js.CatchOperator.call @ vendor.bundle.js:17393
webpackJsonp.../../../../rxjs/_esm5/Observable.js.Observable.subscribe @ vendor.bundle.js:2589
webpackJsonp.../../../../../src/app/processrequest/processrequest.component.ts.ProcessrequestComponent.onSubmit @ main.bundle.js:749
(anonymous) @ ProcessrequestComponent.html:59
handleEvent @ vendor.bundle.js:92877
callWithDebugContext @ vendor.bundle.js:94386
debugHandleEvent @ vendor.bundle.js:93973
dispatchEvent @ vendor.bundle.js:89292
(anonymous) @ vendor.bundle.js:89917
(anonymous) @ vendor.bundle.js:113109
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ polyfills.bundle.js:2502
onInvokeTask @ vendor.bundle.js:84039
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ polyfills.bundle.js:2501
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ polyfills.bundle.js:2269
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask @ polyfills.bundle.js:2577
invokeTask @ polyfills.bundle.js:3621
globalZoneAwareCallback @ polyfills.bundle.js:3647
main.bundle.js:755 ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", …}

Please include and format the complete error message since what you've provided right now isn't very helpful. — Daniel B, Jun 20 '18 at 17:42
Sounds like it may be a CORS issue? Ensure that your backend is sending the appropriate "Access-Control" headers — user184994, Jun 20 '18 at 17:46

score 0 · Answer 1 · answered Jun 20 '18 at 17:48

0

As far as I remember a lot of browsers do send an option request in advance of any other request. You can observe that behaviour very often in your browsers dev tools. as far as I can tell this is not an angular but a browser issue.

answered Jun 20 '18 at 17:48

bastianowicz

90
8

https://stackoverflow.com/q/29954037/1063714 See this answer for further information – bastianowicz Jun 20 '18 at 17:52
I have already enabled CORS Allow-Control-Origin-header through Chrome Extension but even after that, it is giving this exception – Hemant Kakodia Jun 20 '18 at 18:04
Can anyone help now? – Hemant Kakodia Jun 21 '18 at 18:31

score 0 · Answer 2 · answered Jun 29 '18 at 21:40

0

I resolved it by using @CrossOrigin at endpoint method level in target springboot microservices.

We can also use this at controller class.

answered Jun 29 '18 at 21:40

Hemant Kakodia

1
1

While making a Http GET call, Getting "OPTIONS https://riskassessmentidtypes.px-npe01.com/customer-credit/ 0 ()"

2 Answers2