CORS 错误：预检响应中的 Access-Control-Allow-Headers 不允许请求 header 字段授权

Question

我正在尝试获取作为对话消息一部分的图像资源。

我已经尝试过 FETCH 以及使用 AXIOS，但我收到了相同的错误消息。

这是我的 FETCH 请求的示例

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);

这是 Axios 的样子

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);
 }

这两种方式都不起作用。

在深入研究之后，我发现 Chrome 发出了飞行前请求，并作为请求的一部分从服务器请求允许的标头。

返回的响应是这样的

如您所见，在“响应标头”中我没有看到应该设置为授权的 Access-Control-Allow-Headers

我在这里错过了什么？

我已确定我的 ID/密码以及我使用的 URL 都没有问题。 事实上，我已经在我的本地机器上通过 POSTMAN 运行了这个请求，并且返回的结果很好。 只有当我在我的代码中执行此操作并在浏览器中运行时才会出现此问题。

Answer 1

我想到了。

我不必拨打 http 来获取 URL。它可以通过简单地检索

media.getContentTemporaryUrl();