2

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
  • Your serverless template defines the URL as /api/records/byid/{user}/{id} but Axios appears to be calling /dev/api/byid/1/129 without the records bit. Commented Dec 20, 2020 at 20:42

1 Answer 1

1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.