Discussions

Ask a Question
Back to All

CORS

I cannot get my webapp working and I belive it's because of your CORS policy.

Please assist, or I request a refund on all fees I've paid, since this isn't what was advertised.

DETAILS -

Access to fetch at 'https://api.d-id.com/agents/######### from origin 'https://teddyr4-########.herokuapp.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.
Explanation

This error means that the website you're trying to access (in this case, https://teddyr4-9099cae86811.herokuapp.com) is trying to make a request to another website (https://api.d-id.com/agents/agt_1a1P_pcw) but is being blocked due to Cross-Origin Resource Sharing (CORS) restrictions.
Here's a breakdown:


CORS: CORS is a security feature in web browsers that prevents websites from making requests to other domains unless explicitly allowed. This helps protect against malicious attacks.


Access-Control-Allow-Origin header: This header is crucial for CORS. It's a response header that the server (in this case, https://api.d-id.com) sends back to the browser to tell it which origins are allowed to access the resource.
The problem: The server (https://api.d-id.com) is not sending the Access-Control-Allow-Origin header, meaning it's not allowing your Heroku app to access the resource.


How to fix it:
Server-side configuration: The most common solution is to configure the server (https://api.d-id.com) to allow requests from your Heroku app. This usually involves setting the Access-Control-Allow-Origin header in the server's response. You'll need to contact the API provider (d-id) and ask them to add your Heroku app's domain to their allowed origins.


no-cors mode: As the error message suggests, you can use no-cors mode if you don't need the response body. This disables CORS checks, but you won't be able to access the response data.


Important Note: It's generally not recommended to use no-cors mode as a long-term solution. CORS is a security feature and disabling it can create vulnerabilities. Always prioritize getting the server to properly configure CORS.
Data used to understand this message