Discussions

This indicates that the server hosting the file does allow it to be downloaded when you manually enter the URL into a browser, but not when it's programmatically requested from '<http://localhost:3000'>, indicating a CORS issue. Here are two things to note: Browsers enforce the CORS policy, not the server. When you manually enter a URL into a browser, it's treated as a direct user interaction and doesn't have to deal with CORS. However, when a script running on a webpage tries to make a request to a different domain, the browser will enforce CORS policy. When a fetch request is made from your JavaScript code, the browser first sends a preflight request to the server to check if it's okay to send the actual request. This preflight includes the origin (in your case '<http://localhost:3000'>) and the server should respond with the 'Access-Control-Allow-Origin' header matching this origin, or a wildcard '\*', to allow the request. However, if the server doesn't respond with the correct headers, the browser will block the fetch due to the CORS policy, even if the server would have accepted the actual request. Possible solutions: CORS Proxy: A common workaround for development is to use a CORS proxy that adds the required CORS headers to the response. For example, you could prepend your URL with <https://cors-anywhere.herokuapp.com/>, and it will proxy your request. Note that this solution should not be used in production. Modify Server Configuration: The proper solution is to modify the server configuration to respond with the necessary CORS headers. In this case, you'd need to configure your Amazon S3 bucket to allow cross-origin requests from '<http://localhost:3000'>. You can do this by adding a CORS policy to the S3 bucket. Amazon has documentation on how to do this. Remember to only allow the origins you trust to access your data, as allowing all origins could expose sensitive data. User the s3 bucket is maintained by a third party vendor ChatGPT If the S3 bucket is maintained by a third party, then modifying the server's CORS configuration might be out of your control. In this case, I suggest the following options: Reach out to the third-party vendor: The best course of action would be to get in touch with the vendor and explain the issue to them. If they're willing, they could add your origin ('<http://localhost:3000'>) to their CORS policy, which would solve the problem. Use a Proxy Server: If you're unable to get the third-party vendor to update their CORS policy, another option is to create your own server that will act as a proxy. The server would make requests to the S3 bucket (since server-to-server requests aren't subject to CORS policy), and your client-side code would make requests to your server, thereby bypassing the CORS issue. Please be aware that depending on the nature of your project, this may have additional infrastructure and maintenance costs. Use a Service Worker: If the content is public and doesn't require authentication, you could consider using a service worker. Service workers act as a proxy server that's embedded in the user's browser and can handle requests/responses, which would allow you to bypass the CORS issue. However, implementing service workers can be complex and they come with their own set of issues, so I would only recommend this if you're already familiar with them.

Access to fetch at '<https://d-id-talks-prod.s3.us-west-2.amazonaws.com/auth0%7C6428b6821e6006b657eae3f9/tlk_9f4pmT2PaMpWL5RAEOSfo/1686995694017.mp4?AWSAccessKeyId=AKIA5CUMPJBIK65W6FGA&Expires=1687082107&Signature=5ZClhrw5q9PbpWDgr0uCz0lw8eU%3D&X-Amzn-Trace-Id=Root%3D1-648d82fb-0d3c02cb4974557f7b930a3c%3BParent%3Dcbc029d12919de39%3BSampled%3D1%3BLineage%3D6b931dd4%3A0>' from origin '<http://localhost:3000>' 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. upload.js:87 GET <https://d-id-talks-prod.s3.us-west-2.amazonaws.com/auth0%7C6428b6821e6006b657eae3f9/tlk_9f4pmT2PaMpWL5RAEOSfo/1686995694017.mp4?AWSAccessKeyId=AKIA5CUMPJBIK65W6FGA&Expires=1687082107&Signature=5ZClhrw5q9PbpWDgr0uCz0lw8eU%3D&X-Amzn-Trace-Id=Root%3D1-648d82fb-0d3c02cb4974557f7b930a3c%3BParent%3Dcbc029d12919de39%3BSampled%3D1%3BLineage%3D6b931dd4%3A0> net::ERR_FAILED 200 (OK) this is the function i'm using to fetch the Video: ``` async function downloadUrl(url, filename) { const options = { method: "GET", mode: "no-cors", // Add the "no-cors" mode option }; const response = await fetch(url, options); const data = await response.blob(); if (typeof window.navigator.msSaveBlob !== "undefined") { // For Internet Explorer and Edge window.navigator.msSaveBlob(data, filename); } else { // For other browsers const downloadLink = document.createElement("a"); const fileUrl = URL.createObjectURL(data); downloadLink.href = fileUrl; downloadLink.download = filename; downloadLink.click(); URL.revokeObjectURL(fileUrl); } } export { downloadUrl }; ``` Please respond to either owner account email ([email protected]) or my email ([email protected]) i really don't want to scrap the work and i like the platform but if we cant get this to work there's no reason to continue subscription :( thank you

We are having intermittent but fairly consistent CORS policy issues with the live-streaming-demo code. I am running your sample in Apache and using Google Chrome. I've tested both locally and on a hosted server with valid SSL. `Access to fetch at 'https://api.d-id.com/talks/streams/strm_wXeTNvuvh2TcZLuDE3fU6/ice' from origin 'http://127.0.0.1' 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.` These issues occur both during the connection process (pressing Connect) and when using POST to Create a talk stream (pressing Talk). Even when a connection is established Pressing Talk seems to regularly fail the first time and then work on subsequent presses. I've been working on a prototype for a client. Trying to work around these intermittent CORS policy issues is really eating into our credits. Any suggestions would be appreciated.