Question posted in
Some documentation to get you started can be found here.

Angular HttpClient Response to preflight request doesn't pass access control check: It does not have HTTP ok status – Apache

I am attempting to use HttpClient to get a json return from a file that I have locked using htaccess and htpasswd on my web server. I can run the get/post request on postman with the Authorization header and it returns fine. When I run it in angular, I get the error in the title along with a 401 error.

Here is the function that triggers the HttpRequest

  getConfig(): Observable<any> {
    return this.http.get('myurlhere/myfile.json', { responseType: 'json' })
  }

Here is my interceptor – and yes, the console.log fires and logging the result shows the the request with the headers appended.

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor() { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      setHeaders: {
        'Authorization': 'Basic XXXXXXXXXXXXXXXXXXXXXXX'
      }
    })
    console.log('INTERCEPTED')
    return next.handle(req);
  }
}

There are a lot of similar issues here, but nothing seems to be working. The 401 return is labeled OPTIONS and I’ve pieced together what that means, just can’t find a way around it.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    FIX It ended up being an issue server-side with htaccess and CORS setup.

    Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
Header always set Access-Control-Allow-Headers: "Authorization"

<Files config.json>
AuthType Basic
AuthName "Authentication Required"
AuthUserFile C:xampphtdocs.htpasswd
Options -Indexes
<LimitExcept OPTIONS>
  Require valid-user
</LimitExcept>
</Files>

    I needed to add the LimitExcept block, then it started working!


  2. 0

    It seems there is an issue with the request, the request object (req) is immutable, so you have to define a new property and clone the request to it, then update it 

    import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor() { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const modifiedReq = req.clone({
      setHeaders: {
        'Authorization': 'Basic XXXXXXXXXXXXXXXXXXXXXXX'
      }
    })
    console.log('INTERCEPTED')
    return next.handle(modifiedReq); // pass the modified request to the handle method
  }
}

    check the docs for more info

    hope it helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search