CORS Problems using Apache backend with Angular app-CodePudding

I'm working on an angular application which should connect to an Apache backend. The apache REST API is working propperly and I can use it over Postman, but I haven't managed to consume it from my angular application due to CORS problems which are driving me crazy. I have checked everything, but the error persists and I can move forward.

Let me explain the environment and situation:

The app is sending a POST Request to the backend. I have tried sending and not sending the header 'Access-Control-Allow-Origin':'*', but it fails in both cases.
The apache headers are already enabled.
The apache2.conf file doesn't include any configuration of the headers regarding this problem.
The .htaccess file of my site is empty.
The apache config site for the site of the API is:

<Directory "/home/javierd/test">
        Options Indexes MultiViews FollowSymLinks
        AllowOverride None
        Order deny,allow
        Allow from all
        Require all granted

    Header unset Access-Control-Allow-Origin   env=AccessControlAllowOrigin
    Header unset Access-Control-Allow-Methods  env=AccessControlAllowOrigin
    Header unset Access-Control-Allow-Headers  env=AccessControlAllowOrigin
    Header unset Access-Control-Expose-Headers env=AccessControlAllowOrigin
    
    Header always set Access-Control-Allow-Origin "*"
    Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
</Directory>

Alias /test "/home/javierd/test/html/www"

As far as i know, this should work, but everytime I try to access the API I get

Access to XMLHttpRequest at 'http://localhost/test/rest' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

And I don't really know why there are mutiple * values. I have also tried with simpler configurations, using just Header set Access-Control-Allow-Origin "*" (without the always). With this config I get a similar CORS error:

Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

However, as I mentioned previously, the API is working with postman.

I have also tried using a proxy with the angular cli, but I endup getting 404 errors although the logs show that the proxy is working. My proxy config file is the following one:

{
  "/test": {
    "target": "http://localhost/test",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

but the logs show

[HPM] POST /test/rest/login -> http://localhost/test

so I don't really know if the petitions are being redirected or not.

I know there are lots of questions regarding CORS and Apache/Angular, and I have read lots of them, but I can't figure out a solution.

Could somebody help me?

Thanks a lot!

CodePudding user response：

it's restrict you web browser localhost you can disable web security if you are using chrome

Win   R

then run this cmd

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

CodePudding user response：

In the top of your php script you can add the following code to disable CORS globally:

/**
 * 
 * Access Control
 * 
 */
if (isset($_SERVER['HTTP_ORIGIN'])) {
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400');    // cache for 1 day
}


if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) {
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
    }
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) {
        header("Access-Control-Allow-Headers:        {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
    }

    exit(0);
}