Angular 8 - httpClient Get method transforms to Options method

Question

I am trying to send Get request to my server(Microsoft 2012). I have already added this solution. But in this is solution my get request transformed to Options method.

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/vnd.sas.datamgmt.jobflow.metadata+json; charset=utf-8',
    'Authorization': 'Basic' + btoa('username:password')
  })
};

I also added:

    httpOptions.headers.set('username', 'password');
    httpOptions.headers.append('Access-Control-Allow-Origin', '*');
    httpOptions.headers.append('Access-Control-Allow-Credentials', 'true');
    httpOptions.headers.append('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
    this.typesOfDBs = this.http.get<Info[]>(this.ROOT_URL, httpOptions);

I watched my request and I saw the request is now Options request. How can I handle it and send request as Get method?

Vieva

You are mixing request and response headers! – Waxwork

I also tried without Access-Control-.. statements – Vieva

Possible duplicate of Response to preflight request doesn't pass access control check – Offwhite

Answer 1

I used nodejs proxy to solve this question. Nodejs handled it easily. You must send request to nodejs from angular. And to restapi from nodejs.

Vieva

Answer 2

Yes right, whenever you calls any API from browser it calls OPTIONS for checking that API really callable or server can handle the request with specified criteria.

If in your case options call gives you success then browser must call actual API with GET method type.

If not calling with GET method type then there could an issues with headers might be sending more or may less.

This type of requests works fine with Postman or fiddler or API testing tools but gives issues with browsers.

I would suggest check for headers first if any interceptor try to comment and then test for this API.

Hope so it would help you.

Orthman

Answer 3

It's just a CORS issue, you need to set the headers you specified on the server side, not on the client side making the request

Design