CORS Issue When Migrating Project to IDX

General
1

Hello IDX Community,

First of all, a huge thank you to the IDX team for this fantastic platform! I’ve been eagerly waiting to use IDX since its announcement, and I’m thrilled to finally get my hands on it.

That said, I’m encountering a CORS issue after migrating my project to IDX. The setup works perfectly on localhost, but when I try to access the backend from the frontend in IDX, I receive the following error:

Access to XMLHttpRequest at ‘backend-url’ from origin ‘frontend-url’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Current Setup:

  • Frontend: Running on an IDX instance
  • Backend: Running on a separate IDX instance

CORS Configuration:
I am using the cors() middleware in my backend setup without any specific options, which should allow requests from any origin by default.

Steps Taken:

  1. Verified the CORS configuration works on localhost.
  2. Attempted to manually set headers in Thunder Client for testing but still encountered issues.

Error Message:

frontend-url/:1 
Access to internal resource at 'https://ssh.cloud.google.com/devshell/gateway/oauth?state=...' 
(redirected from 'frontend-url/manifest.json') from origin 
'frontend-url' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Question:
Has anyone faced a similar issue when migrating to IDX and found a solution? Any tips or configurations that worked for you would be greatly appreciated.

Thank you once again for this amazing platform, and I look forward to any help you can provide!

2

I found similar issues, doesn’t seem to be possible at this point.

Back to Codespaces…

3

Hey - Have you tried the instructions in : Full-stack development in Project IDX

You might be missing credentials: 'include', on the client when making the request.

1 Like
4

I don’t think that works across workspaces and it also means you’re not really developing in a normal environment nor is it like what it would be in production.

The fact that you can’t access your own API normally (like you can running locally or on other hosted IDEs or as it will be in production) makes this kind.of a non starter.

5

Hi everyone,

Thank you @essayoub for your suggestion. I had already tested your suggestion, even using the basic cors() setup without any specific options, but unfortunately, it didn’t resolve the issue. Using cors() without any options should theoretically allow requests from any origin, but in my case, it didn’t work as expected.

As for @ksat, thanks for your reply. I also tested your suggestion. I did set withCredentials to true, and it helped fix the problem partially. However, I encountered an interesting behavior during my testing.

I created a simple test application, and the CORS issue was resolved when no Authorization header was sent from the frontend to my backend. But when I included an Authorization header, the CORS problem resurfaced.

I even tried changing the header name from Authorization to App-Authorization, but the issue persisted. It seems there’s an additional layer of complexity related to Google’s VMs Authorization.

Appreciate your input!

Summary of Tested Solutions and Current Findings:

Here’s a summary of what I have tested and learned so far:

  1. Basic CORS Configuration:
  • Using cors() middleware with or without any options did not resolve the issue.
  1. Adding withCredentials to Axios:
  • Setting withCredentials to true partially fixed the issue. The CORS problem was resolved only when no backend Authorization header token was sent.
  1. Authorization Header Issue:
  • The CORS problem occurs specifically when an Authorization header is included in the request. Changing the header name to App-Authorization did not resolve the issue.
  1. Next Steps:
  • I will continue to research and debug the handling of custom headers and how they interact with CORS policies. Ensuring proper configuration of allowed headers in the backend will be my focus.

I appreciate all the suggestions so far and will keep you updated on my progress. Hopefully, we can get to the bottom of this soon!

Thank you all for your support!

2 Likes
6

I had the same issue with my Django app. I tried everything: setting “cors allowed origins”, “cors origin whitelist”, “cors allow all origins”, etc, and nothing worked. Opened it from my local machine and it did. I’m a student so my understanding is limited, I don’t know if it’s a bug or something.

7

Hi @Pablo_Caballero_Mari - because IDX runs in the browser, there are some added restrictions that are in play that don’t impact your local development setup. We are actively looking at ways of working around this so that your local setup will work without modification when opened in IDX :slight_smile:

1 Like