JavaScript HTTP 0 Error in Label Studio When Accessing Cross-Domain API

[SabolSocare]

Hi Label Studio Community,

I'm encountering a CORS-related issue while using Label Studio. Whenever I try to make an API call to a server on another domain, I get the following error:

"Oh no! JavaScript returned an HTTP 0 error. One common reason this might happen is that you requested a cross-domain resource from a server that did not include the appropriate CORS headers in the response. Better open up your Firebug..."

Here’s what I’ve tried so far:

Verified that the target API is running and accessible directly via a browser.
Checked my front-end JavaScript, and the API request is formatted correctly.
Attempted to modify the CORS settings on the API server but still encounter this issue.

Environment Details:

Label Studio version: 1.14.1
Frontend framework: React
Question:
How can I configure Label Studio or the API server to properly handle cross-origin requests? Are there any Label Studio-specific settings I might be missing to address this error?

Any guidance or suggestions would be greatly appreciated. Thank you!

[106firestarter]

I'm also having some issues with the xhr requests with presigned urls on the labeling interface. however, i am able to load the media audio urls on the project menu, just not on the labeling interface it self.

running on 1.15.0 and if I downgrade to 1.13.1 there are no issues, so should be something related with django update or the CSRF checks from 1.14.x version. Also, got CORS correctly setup on my GCR bucket as well.

I tried disabling the CSRF checks, I have the correct envs defined and even tried some other work-arounds with the envs but nothing seems to be working.

Don't know if it is completely related with the issue firstly mentioned but it does actually seem similar but im sorry if it's not !

thanks in advance!

[heidi-humansignal]

Hello,

Thank you for contacting Label Studio,

Could you please confirm that on API service side, you are including the following headers in its HTTP respones :

   Access-Control-Allow-Origin: https://your-label-studio-domain.com Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS Access-Control-Allow-Headers: Content-Type, Authorization

Replace https://your-label-studio-domain.com with the actual domain where your Label Studio instance is running. If you're testing and want to allow all domains temporarily, you can set Access-Control-Allow-Origin to *, but it's recommended to specify the exact domain for security reasons.

Handle Preflight OPTIONS Requests:

• Browsers may send a preflight OPTIONS request before the actual request. Ensure that your API server can handle OPTIONS requests and responds with the appropriate CORS headers.
  Verify Protocol and Ports:

• Make sure that both Label Studio and your API server are served over the same protocol (http or https). Browsers block requests from https pages to http resources due to mixed content restrictions.

If all of the above suggestions, have not resolved the issue, could you please capture Console logs, to view detailed CORS errors. This can provide insights into what's being blocked and why.

Best regards,

Comment by Oussama Assili
Workflow Run

[106firestarter]

this is related with this: #7103

I'm hoping for a proper fix instead of having to allow the extra headers (baggage,sentry-trace) on our GCR bucket CORS policy