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:
Verified the CORS configuration works on localhost.
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!
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.
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:
Basic CORS Configuration:
Using cors() middleware with or without any options did not resolve the issue.
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.
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.
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!
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.
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
I’ve spent so much time trying to work around this issue, I wish i’d seen this comment earlier.
So basically packages http and dio won’t work in the IDX web emulator?
@RestController @RequestMapping(path=“/testController”) @CrossOrigin(origins = “", allowedHeaders = "”)
public class TestController {
@GetMapping(path="/getTestData")
public List<Employee> getTestData(){
List<Employee> le = new ArrayList<Employee>();
le.add(new Employee(1, "Asutosh Nayak","98614*****","asutosh****@gmail.com","Male",24,"Developer",75000.00));
return le;
}
}
when i try to get the data by using rest api url from chrome browser it working successfully. But the intresting thing it is only work on google chrome or if you use localhost:3000 it works inside idx thunder client expect that every where it show either cross origin issue or workspace issues. please fix this. @kirupa
You can use your backend API (as localhost) anywhere from idx editor simply by going to idx tab (side button named “Project IDX”) and then scroll down to BACKEND PORT and then there is a lock icon, click onto it and it will convert to orange globe icon, then you can work on that API
NOTE: before going to backend port you have to start your development from terminal by command(npm run dev/ yarn dev/ etc)
FINALLY!!! It’s working and I can now do everything on Chrome OS. I git clone all the repositories I need for a single project in one workspace and use localhost with databases without issues.
