Receiving 405 Whenever I Try To Post To GCP API Gateway With Authentication Header

Question

So my problem is that whenever I try to POST to GCP API Gateway with an Authorization header I am receiving a 405 CORS preflight error.

I was receiving this with all of my POST requests at one point but after changing my Content-Type from application/json to text/plain it started working for some.

Here is my code so far:

api-gateway.yaml

swagger: '2.0'
host: {{my host}}
info:
  title: Client API
  description: Client API
  version: 1.0.0
schemes:
  - https
produces:
  - application/json
consumes:
  - application/json
paths:
  /user:
    get:
      summary: Gets all users
      operationId: users_get
      x-google-backend:
        address: {{my cloud run backend url}}
      security:
        - firebase: [ ]
      responses:
        '200':
          description: OK
        '400':
          description: Bad request
        '401':
          description: Authorization information is missing or invalid.
        '500':
          description: Unexpected error.
      tags:
        - User

And this is my test.html where I am simply trying to call that endpoint with JS

  document.getElementById("testButton").addEventListener("click", () => {
    const endpointUrl = '{{Cloud Endpoints URL}}';

    fetch(endpointUrl, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Authorization': '{{my token}}'
      },
    })
            .then(response => response.text())
            .then(data => {
              document.getElementById("response").innerText = data;
            })
            .catch(error => {
              document.getElementById("response").innerText = 'Error: ' + error.message;
            });
  });

Here is a little more context on whats going on and things that I have tried:

If I hit the endpoint directly on cloud run I am able to successfully do it.
If I call the endpoint through API Gateway without a token it gives me a 401.
I have tried adding CORS and removing CORS right on the cloud run endpoint and that did nothing.
I have also tried adding allowCors to my endpoints yaml but it did nothing. I did that right after line 2 (host line) in the api-gateway.yaml. This is what I added:
```
x-google-endpoints:
- name: {{my gateway URL}}
  allowCors: True
```

So is there any way to turn off the strict enforcement of CORS in API Gateway? The whole purpose of this is to make things a little more flexible and portable but all I am seeing from this product is that it is making our API extremely rigid and very hard to use.

Any help with this would be greatly appreciated and if you need any other information from me please don't hesitate to ask. I have been battling with this for 3 days and have only made a little progress.

Thanks in advance for any help.

score 2 · Answer 1 · answered Jul 28 '23 at 15:31

To enable CORS for your API Gateway, we'll take a different approach. Instead of directly setting allowCors: True in the x-google-endpoints section, we will add the necessary CORS headers explicitly to the responses. To do this, you can modify your OpenAPI specification (api-gateway.yaml) as follows:

 responses:
      '200':
        description: OK
        headers:
          Access-Control-Allow-Origin:
            type: string
          Access-Control-Allow-Methods:
            type: string
          Access-Control-Allow-Headers:
            type: string
      '400':
        description: Bad request
      '401':
        description: Authorization information is missing or invalid.
      '500':
        description: Unexpected error.
    tags:
      - User
  post:
    summary: Creates a user
    operationId: users_create
    x-google-backend:
      address: {{my cloud run backend url}}
    security:
      - firebase: []
    responses:
      '200':
        description: OK
        headers:
          Access-Control-Allow-Origin:
            type: string
          Access-Control-Allow-Methods:
            type: string
          Access-Control-Allow-Headers:
            type: string
      '400':
        description: Bad request
      '401':
        description: Authorization information is missing or invalid.
      '500':
        description: Unexpected error.
    tags:
      - User
    x-google-endpoints:
      - name: "{{my gateway URL}}"

By making these changes, we are explicitly adding CORS headers (Access-Control-Allow-Origin, Access-Control-Allow-Methods, and Access-Control-Allow-Headers) to the responses for both the GET and POST methods. This should enable CORS for your API Gateway, allowing your frontend application to make requests to it from a different origin.

After applying these changes, remember to redeploy the API Gateway to see the updates take effect.

If you still encounter issues, please check the response headers of your API Gateway requests to verify if the CORS headers are being correctly added. Also, ensure that your frontend application is making the requests correctly and that there are no issues with the token or other headers being sent.

For more information, you can check the GCP API Gateway CORS configuration documentation and OpenAPI extensions for Google Cloud Endpoints.

If you encounter a similar error and need further assistance, you can also refer to these links.

Receiving 405 Whenever I Try To Post To GCP API Gateway With Authentication Header

1 Answers1