Angular 405 Method not allowed and "Provisional Headers are shown" error

Question

This is driving me insane. I am trying to send a simple request to my api server and appending the header. It is first giving me this Provisional Headers are shown message then it will fail on the next request

  Provisional headers are shown
Accept: application/json, text/plain, */*
Access-Control-Allow-Credentials: true
Cache-Control: no-cache
Expires: Sat, 01 Jan 2000 00:00:00 GMT
Pragma: no-cache
Referer: https://mywebsite.com/
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Safari/537.36

If I add the below data in my intercept method then I get the error.

 intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    request = request.clone({ headers: request.headers.set('Access-Control-Allow-Credentials', 'true') }); 
    request = request.clone({ headers: request.headers.set('Cache-Control', 'no-cache') });
    request = request.clone({ headers: request.headers.set('Pragma', 'no-cache') });
    request = request.clone({ headers: request.headers.set('Expires', 'Sat, 01 Jan 2000 00:00:00 GMT') });      
    
    return next.handle(request);
  }

If I remove it and do not add the headers then I don't get an error but eventually I will need to send other data in the header like an authtoken and user id. Why am I getting this 405 error when appending to the headers?

Also why is it telling me method not allowed when I clearly am allowing Options and Post methods

A related post [here](https://stackoverflow.com/questions/19095777/how-to-support-http-options-verb-in-asp-net-mvc-webapi-application) — Thangadurai, Jul 31 '20 at 19:02
You need to read up about CORS (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) to understand the issue and then implement it server side. Besides `Access-Control-Allow-Credential` is a server side header and adding it client side will cause more issues — David, Jul 31 '20 at 19:37
The preflight request is always an `OPTIONS` and doesn't use the same method as the actual request. Please add some details about api controller, calling methods (ordered) and about why you add headers handy. Let us know if you are working on development or production environment since it differs. If these are the production mode results, are they existing on development mode too? — Amirhossein Mehrvarzi, Aug 01 '20 at 09:43

score 1 · Accepted Answer · answered Aug 01 '20 at 00:09

I had this same problem about a month ago.

You need to create a basic http ok response for the Options verb. Put this in your base api controller. The options request is sent first and it needs an ok response callback before it can proceed with passing Options to the API

 public HttpResponseMessage Options()
{
  return new HttpResponseMessage { StatusCode = HttpStatusCode.OK };
}

score 0 · Answer 2 · answered Jul 29 '20 at 07:07

0

Try add API Key in header (e.g.: x-my-api-key) API Value in header (e.g.: 7e807890-c777-466a-897)

Hope this could help...

answered Jul 29 '20 at 07:07

Algem Mojedo-MCPD-EA

61
3

Angular 405 Method not allowed and "Provisional Headers are shown" error

2 Answers2