-2

I am hosting an Angular project on Firebase. I have implemented a payment gateway into the project which works fine on localhost, but on the live environment I am getting the following error:

Access to XMLHttpRequest at 'https://test.oppwa.com/v1/xxx' (redirected from 'https://www.mydomain.cum/api/v1/xxx') from origin 'https://www.mydomain.cum' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

I have come across serval SO questions asking the same question to which the response it typically add the correct Access-Control-Allow-Headers such as in this question

I have added every header under the sun I could find - accordingly my latest set up is as follows:

    this.url =
      'api/' + resourcePath + '?entityId=xxx';

    this.headers = new HttpHeaders()
      .set(
        'Authorization',
        'Bearer xxx=='
      )

    this.httpOptions = {
      headers: this.headers as HttpHeaders,
    } as Object;

    return this.http
      .post(this.url, this.paymentData, this.httpOptions)
      .toPromise();

And below is my firebase.json file in total:

{
  "hosting": {
    "public": "dist/xxx",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "redirects": [
      {
        "source": "/api/:path*",
        "destination": "https://test.oppwa.com/:path",
        "type": 301
      }
    ],
    "headers": [
      {
        "source": "**/*.@(html)",
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          },
          {
            "key": "Access-Control-Allow-Credentials",
            "value": "true"
          },
          {
            "key": "Access-Control-Allow-Methods",
            "value": "GET,HEAD,OPTIONS,POST,PUT"
          },
          {
            "key": "Access-Control-Allow-Header",
            "value": "Origin, X-Requested-With, Content-Type, Accept, Authorization"
          }
        ]
      }
    ]
  }
}

Please can anyone guide me as to what I am doing wrong here.

Ruben Ferreira
  • 152
  • 9

1 Answers1

-2

You allow the header Content-Type and the error says that content-type is not allowed - which is right, because CORS is case-sensitive.

Try to use the field Content-Type in your request and it should work.

This doesn't make sense and isn't well documented so you're by far not the only one who struggles with this :-D

The resource that helped me best to understand CORS is the Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Fred
  • 1,103
  • 2
  • 14
  • 35
  • Also keep in mind that CORS has a server side and a client side and both need to be configured to match each other. – Fred Jan 31 '22 at 15:45
  • Thanks @Fred What do I do if I am unsure how the server side is configured? – Ruben Ferreira Jan 31 '22 at 16:07
  • The resource that helped me the most to understand CORS is the Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS – Fred Jan 31 '22 at 20:18
  • wrt your question: If you send a request to the server, it should answer with a response that tells you the CORS settings. – Fred Jan 31 '22 at 20:20