Why is AWS Lambda, API Gateway returning a CORS error

Viewed 674

I know this issue has been covered in many posts all over the web and I think I've tried them all, but I'm still getting a 403 CORS error to my local react app.

Here are in part, the Headers from Dev Tools:

#GENERAL:
Request URL: https://<myGatewayApiUrl>.amazonaws.com/dev/api/byid/1/129
Request Method: OPTIONS
Status Code: 403

#RESPONSE HEADERS
access-control-allow-headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token
access-control-allow-methods: GET,OPTIONS
access-control-allow-origin: *
content-length: 42
content-type: application/json

I've been working in the API Gateway setting the Enable CORS, but I get an error for one get methods Add Access-Control-Allow-Origin Integration Response Header Mapping to GET method -> invalid response status code specified - But the OPTIONS headers get set and the GET header Access-Control-Allow-Origin is set.

I am using express and cors packages, here's a snippet from my API index.js file:

const app = express();

app.use(cors());
app.options('*', cors());

Here is the request code from React app:

export const getRecordById = async (userId, id, token) => {
  try {
    const response = await axios.get(
      process.env.REACT_APP_API_URL + `/byid/${userId}/${id}`,
      {
        headers: {
          Authorization: `Bearer ${token}`,
          'Content-Type': 'application/json',
        },
      }
    );
    return response.data;
  } catch (error) {
    console.log('ERROR', error);
    return error;
  }
};

Here is my response code from the Lambda API:

getById: asyncHandler(async (req, res, next) => {
    const { user, id } = req.params;
    const result = await recordsService.getRecordById(user, id);

    res.set({
      'content-type': 'application/json',
      'Access-Control-Allow-Origin': '*',
    });

    if (!result) {
      res.status(400).json({
        error: true,
        message: 'get record by ID action failed',
        data: {},
      });
    }
    res.status(200).json({
      error: false,
      message: 'successful record retrieval',
      data: {
        record: result,
      },
    });
  }),

Also, I have my serverless.yml file http events set as such: (from what I understand cors: true should handle the preflight requests)

- http:
    path: /api/records/byid/{user}/{id}
    method: GET
    cors: true

I've spent way too much time trying to figure this out. It must be something simple and dumb, am I using res.set() properly? Everything looks correct, I know I'm missing something. Thanks

1 Answers

API Gateway will reject the call with a CORS error when a URL is not found by default.

It looks like Axios is missing the /records bit from the request URL.

Related