Making an HTTP get request to an ASP.net Web API with user authentication in an Ionic Angular app

Question

I'm having trouble making an http get request to an ASP.net Web API with user authentication. The goal is to get a JSON file from the API. I'm developing an Ionic Angular app and all I want to do currently is successfully make the get request.

Additional Context -When you visit the api in a browser, it requires a username and password -A NetworkCredential object is used for authentication in C#

Issue When I preview my app (with ionic serve), I get the following errors: -[Error] Preflight response is not successful -[Error] XMLHttpRequest cannot load http://notrealwebsite.com/api/example/3 due to access control checks. -[Error] Failed to load resource: Preflight response is not successful

What I've tried Right now my code looks like this:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  httpOptions = {
    headers: new HttpHeaders({
      'Authorization': 'Basic ' + btoa('domain//username:password')
    }),

  }

  constructor(private http: HttpClient) { }

  getTest(id) {
    return this.http.get(`http://notrealwebsite.com/api/example/${id}`, this.httpOptions);
  }
}

Something to try: angular.io/api/common/http/HttpRequest#withCredentials. And this: stackoverflow.com/questions/38615205/… — R. Richards
– R. Richards, Commented Jun 17, 2021 at 22:05

eppsilon · Accepted Answer · 2021-06-17 23:20:57Z

1

HTTP requests in a browser environment are restricted by a protocol called CORS. Before making your request, the browser will send an OPTIONS request (a "preflight" check) to the same URL to find out if it is allowed access.

The error message about the "preflight response" means that the server did not respond to the OPTIONS request, or it returned a header telling the browser it could not proceed. The browser devtools's Network tab may have more information - usually the preflight request is linked next to your intended request.

You can also send an OPTIONS request to that URL using a tool like curl and check the response for the proper Access-Control headers:

curl -i -XOPTIONS 'http://notrealwebsite.com/api/example/<id>'

answered Jun 17, 2021 at 23:20

eppsilon

2,0911 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Making an HTTP get request to an ASP.net Web API with user authentication in an Ionic Angular app

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related