The request has to be a valid CORS request and needs to include an "Origin" header. Angular

Question

I have a Laravel/Lumen backend with CORS issues. To solve them, I'm using this package: https://github.com/barryvdh/laravel-cors

When I make a request, it works when I download any cors toggle extensions that are out there. In my understanding, that means CORS works on my server but I need to add something to angular to make it fully working. As the developer states on github: "The request has to be a valid CORS request and needs to include an "Origin" header"

Can I add this header in any way? Thanks in advance

This is normally handled by the browser, so you should not need to add anything client side. More about CORS here https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS — David, Sep 19 '18 at 09:05
Well I might have forgotten to mention that it's for an Cordova app, which loads angular. — SilentLucidity, Oct 02 '18 at 12:06
So when you debug your app's webview, you do NOT see the Origin header? — David, Oct 02 '18 at 12:21

score 0 · Answer 1 · answered Sep 19 '18 at 09:13

You should also add the cors headers in your angularjs request.

for example

                    $http({

                        method: 'POST',

                        data: data,

                        url: " url of post request",

                         withCredentials: false,

                         headers: {
                        'Content-Type': 'application/json',
                        'Access-Control-Allow-Origin' : "url of laravel",
                        'Access-Control-Allow-Methods': 'POST',
                        'Access-Control-Allow-Credentials' : false
                    }

score 0 · Answer 2 · answered Sep 19 '18 at 09:56

I've fought with a similar issue on a few fronts. The best solution I found is to implement a proxy.conf.json config file that does the routing, instead of directly messing with CORS. You implement it using

    ng serve --proxy-config proxy.conf.json

This keeps the CORS valid without any plugins on your browser or otherwise. I moved away from CORS plugins because I was forgetting to turn them off when 'surfing in the wild', which left me exposed to hacks.

You can read more on how to implement this solution at this stackoverflow thread

score 0 · Answer 3 · answered Sep 19 '18 at 10:21

I'm not sure which header you need to have, but if you want to add some headers to all of your requests you can create custom HttpIntercetor like that:

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

@Injectable()
export class HttpCustomInterceptor implements HttpInterceptor {
  constructor() { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authRequest = request.clone({
      setHeaders: {
        Origin: 'WhateverYouWantTo'
      }
    });

    return next.handle(authRequest);
  }
}

If you want to do it only for some specific requests, i.e. GET then you can put some if statement inside intercept method. And then use HttpCustomInterceptor as a provider for HTTP_INTERCEPTOR inside your module:

@NgModule({
  imports: [
    HttpClientModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpClientInterceptor,
      multi: true,
    }
  ]
})
export class AppModule { }

Hope that helps.

score 0 · Answer 4 · answered Sep 20 '18 at 04:05

If you use nginx as a backend you can solve this problem by adding these headers at the server configuration:

location ~ \.php$ {
    [...]
    add_header "Access-Control-Allow-Origin"   * always;
    add_header "Access-Control-Allow-Methods"  "GET, POST, DELETE, PUT, OPTIONS, HEAD" always;
    add_header "Access-Control-Allow-Headers"  "DNT, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Range, Authorization, Origin, Accept, Accept-Language" always;
    add_header "Access-Control-Expose-Headers" "Content-Length,Content-Range" always;
}

The Access-Control-Allow-Origin header specify the domain to accept requests from. You can use your domain URL or * to accept requests from any domain. If you use multiple subdomains for frontend you should use * and block access at the application level.

The request has to be a valid CORS request and needs to include an "Origin" header. Angular

4 Answers4