Question 160279 in Amazon Web Sevices Question posted in
The official Amazon Web Services documentation can be found here.

“How to fix CORS 502 Bad Gateway Error when using ReactJS + FastAPI + AWS for Amazon web services?”

I have my frontend (ReactJS) and backend (Python FastAPI) deployed separately on AWS. I keep getting this error message in my console when I open my frontend in Chrome and access my backend APIs:

Access to fetch at ‘https://private-backend-url.awsapprunner.com/test’
from origin ‘https://private-frontend-url.amplifyapp.com’ has been
blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is
present on the requested resource. If an opaque response serves your
needs, set the request’s mode to ‘no-cors’ to fetch the resource with
CORS disabled. POST https://private-backend-url.awsapprunner.com/test
net::ERR_FAILED 502 (Bad Gateway)

When running my backend and frontend separately on localhost, I see no issues at all.

My FastAPI middleware is as follows:

origins = ["http://localhost:3000", "https://localhost:3000", "https://private-frontend-url.amplifyapp.com", "http://private-frontend-url.amplifyapp.com"]

middleware = [
    Middleware(
        CORSMiddleware,
        allow_origins=origins,
        allow_credentials=True,
        allow_methods=['*'],
        allow_headers=['*']
    )
]

app = FastAPI(title='Test API', middleware=middleware)

My ReactJS API Call is as follows:

    try {
      const response = await fetch(
        'https://private-backend-url.awsapprunner.com/test' ,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            ...newMessage,
            file: docName,
          }),
        }
      );

Upon inspecting element on Chrome, here are the relevant headers captured by the browser:

Request URL: https://private-backend-url.awsapprunner.com/test  
Request Method: POST  
Status Code: 502 Bad Gateway  
Referrer Policy:strict-origin-when-cross-origin  
content-length: 0  
server: envoy  
x-envoy-upstream-service-time: 2509 
Accept: */*  
Accept-Encoding: gzip, deflate, br  
Accept-Language: en-US,en;q=0.9  
Connection: keep-alive  
Content-Length: 212 
Content-Type: application/json  
Host: https://private-backend-url.awsapprunner.com 
Origin: https://private-frontend-url.amplifyapp.com 
Referer: https://private-frontend-url.amplifyapp.com/

I have tried multiple approaches based on what I have found on stackoverflow and other sources, but to no avail. Would appreciate guidance – this issue is deeply frustrating. Thanks.

Tags:

2

Answers


  1. 0

    You need to setup proxy in React.

    Either use proxy setting by adding below line to your package.json. Check if I have given the correct url.

    "proxy": "https://private-backend-url.awsapprunner.com",

    Or, you can use this library http-proxy-middleware to create a middleware and rewrite the urls. I’d prefer this method as you can rewrite the urls however you like with a simple script like below. Remember you need to call your API endpoints with /api not with the full url in order this to work. Here is a sample code:

    const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api/*',
    createProxyMiddleware({
      target: 'https://private-backend-url.awsapprunner.com',
      changeOrigin: true,
      pathRewrite: {
        '^/api': '/test'
      },
    })
  );
};```
    Login or Signup to reply.
  2. 0

    1. Make sure your backend is running and is accessible. The 502 Bad Gateway error suggests that the server may not be running/not responding.

    2. Make sure that the URL for your backend API is correct and is accessible from your frontend/browser.

    3. Make sure the backend is serving correct response headers for CORS. The "Access-Control-Allow-Origin" header must be present in the response from your server. You make sure that you have the FastAPI route configured the same as you are adding middleware CORS configs. Also, localhost does not usually serve on HTTPS.

    4. Try setting the "mode" property of the fetch request to "cors". This tells the browser to send a CORS request, which includes the "Origin" header in the request. You can do this as follows:

      const response = await fetch(
  'https://private-backend-url.awsapprunner.com/test' ,
  {
    mode: 'cors',
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      ...newMessage,
      file: docName,
    }),
  }
);

    5. If you still cannot resolve the issue, you can try using a proxy server to forward requests from your frontend to your backend server. This can be done using server configs. such as Nginx/Apache, or AWS API Gateway.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search