CORS problem with Angular and laravel even after setting the CORS header and server response

Question

I am new to angular and facing some CORS problem. I tried all the possible solution including setting up CORS header and the server side change. But still not working.

I changed the server end with the header 'Access-Control-Allow-Origin': '*' in response. I tried with postman and it's working fine and giving the header response. I also set the header in my Angular app while sending the request. But still giving the error. This is the giving:

Access to XMLHttpRequest at 'http://skewcommerce.test/api/user/add/' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

This is my service to send the request.

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {HttpHeaders} from '@angular/common/http';
import {environment} from '../../environments/environment';

@Injectable({
providedIn: 'root'
})

export class ApiService {
baseUrl = environment.APIUrl;
token: any;

constructor(private http: HttpClient) {
}


postData(url, data) {
const httpOptions =  new HttpHeaders({
        'Access-Control-Allow-Origin': '*',
        'Content-Type':  'application/json',
        });


return this.http.post(this.baseUrl + url + '/', data, {headers : httpOptions});
   }
}

Please help me to know what I did wrong. :(

you need to set them on the server end, here check this https://stackoverflow.com/questions/56133333/axios-request-blocked-by-cors-policy/56137711#56137711 — Aditya Thakur, May 20 '19 at 21:01
I already did that..I tested the api and it is giving me those header in response. — Kazi Naimul Hoque, May 20 '19 at 21:28
Access-Control-Allow-Origin →* Access-Control-Allow-Credentials →true Cache-Control →no-cache, private Access-Control-Allow-Methods →GET, POST, PUT, DELETE, OPTIONS Access-Control-Allow-Headers →X-Requested-With, X-Auth-Token, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding, X-Login-Origin, responseType X-RateLimit-Limit →60 X-RateLimit-Remaining →59 — Kazi Naimul Hoque, May 20 '19 at 21:32
***'Redirect is not allowed for a preflight request.'*** it probably getting redirected, try it without the virtual host. — Aditya Thakur, May 20 '19 at 21:36

score 2 · Answer 1 · answered May 21 '19 at 05:50

Since you are new to angular, I suggest you to go for the solution to set up a proxy configuration. Bypass the proxy using angular-cli. In this way, the one who talks with the API server is Angular CLI server.

Create a proxy config file in the project folder: proxy.config.json with the following content.

{
 "/api/*": {
    "target": "http://skewcommerce.test/api",
    "secure": false,
    "pathRewrite": {"^/api" : ""}
  }
}

Now you can serve your app with the following command:

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

Please Note that your requests have to go to 'localhost:4200/app/{resource name}'. For example, like this:

this.httpClient.get('api/data/users'));

score 0 · Answer 2 · answered May 21 '19 at 00:09

Be sure to have the headers set on your vhost configuration.

The vhost should be configured like this.

<VirtualHost *:80>

  # CORS
    Header always set Access-Control-Allow-Origin "*"
    Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
    Header always set Access-Control-Allow-Credentials "true"
    Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"
    Header always set Access-Control-Max-Age "1000"

    # Added a rewrite to respond with a 200 SUCCESS on every OPTIONS request.
    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ $1 [R=200,L]

    ServerName skewcommerce.test

    DocumentRoot /Your/Dir/To/The/Site
    <Directory  "/Your/Dir/To/The/Site">
        Options +Indexes +FollowSymLinks +MultiViews
        AllowOverride All
        Require local
    </Directory>
</VirtualHost>

If you go this way, you maybe need to delete the 'Access-Control-Allow-Origin': '*' on the Laravel side.

Hope it helps.

CORS problem with Angular and laravel even after setting the CORS header and server response

2 Answers2