0

I'm trying to fetch an image resource that's part of a conversation message.

I've tried both FETCH as well as using AXIOS but I'm getting the same error message.

Here's an example of my FETCH request

const token = `${accountSid}:${authToken}`;
const encodedToken = Buffer.from(token).toString('base64');

let response = await fetch('https://mcs.us1.twilio.com/v1/Services/<SERVICE_SID>/Media/<MEDIA_SID>', 
            {
                method:'GET',                
                headers: {                    
                    'Authorization': `Basic ${encodedToken}`,
                }                
            });
            let data = await response.json();
            console.log(data);

And here's what Axios looked like

let config = {
                method: 'get',
                crossdomain: true,
                url: 'https://mcs.us1.twilio.com/v1/Services/<SERVICE_SID>/Media/<MEDIA_SID>',
                headers: { 
                  'Authorization': `Basic ${encodedToken}`,                  
                },                
              };

try {
      const media = await axios(config);
      console.dir(media);
 } catch(err) {
     console.error(err);
 }

Both ways are NOT working.

After looking into it more, I found out that Chrome makes a pre-flight request and as part of that requests the allowed headers from the server.

The response that came back was this

enter image description here

as you can see, in the "Response Headers" I don't see the Access-Control-Allow-Headers which should have been set to Authorization

What am I missing here?

I have made sure that my id/password as well as the URL i'm using are fine. In fact, I've ran this request through POSTMAN on my local machine and that returned the results just fine. The issue is ONLY happening when I do it in my code and run it in the browser.

Saumil Shah
  • 1,383
  • 2
  • 11
  • 20
  • I think the API you're trying to access is meant for server-to-server use; it is probably intentional that CORS is blocking it from being called from the browser. Is what you're trying to do not part of the client-side SDK? – Robert Nubel Nov 29 '22 at 19:50
  • I thought this was the ONLY way to read media for a chat as mentioned on this page https://www.twilio.com/docs/conversations/api/media-resource – Saumil Shah Nov 29 '22 at 20:35
  • Well, over a REST API, yes, but Twilio expects only servers to communicate with it over REST. The client SDKs use a websocket connection. But the client SDKs do provide a way for you to request a short-lived URL with [getMedia](https://www.twilio.com/docs/conversations/media-support-conversations#retrieving-media-message-content). Then you can download the content from that URL, or redirect the user to it. – Robert Nubel Nov 29 '22 at 22:06
  • Right. But that getMedia function ONLY has media SID. Which means, I still have to make another call to get the ACTUAL media URL, etc...which is what I'm doing here. MediaSID that i'm passing into the URL does come from this "getMedia" you're talking about – Saumil Shah Nov 29 '22 at 23:34
  • You were partly right. Actual call was media.getContentTemporaryUrl() – Saumil Shah Nov 29 '22 at 23:42

1 Answers1

0

I figured it out.

I don't have to make an http call to get the URL. It can be retrieved by simply

media.getContentTemporaryUrl();

Saumil Shah
  • 1,383
  • 2
  • 11
  • 20