Fetch 未检索 302 重定向调用的响应

Question

在 ReactJS 组件中，对重定向到另一个 API 的 API 的 fetch 调用不会返回最终目的地的响应。Fetch 仅返回opaquenull 0 等响应，就好像您的调用失败一样。它甚至没有说它重定向了。但在Chrome的控制台中，“网络”选项卡清楚地显示重定向的调用成功。

            let call = fetch(encodedQueryUrl, {
                method: 'GET',
                cache: 'no-cache',
                mode: 'no-cors',
                redirect: 'follow',
                credentials: 'same-origin'
            }).then((response) => {
                console.log("Response???", response);
                return response;
            });

因此编码的QueryURL响应标头：

Request Method: GET
Status Code: 302 
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Headers: access-control-allow-origin
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Origin: *
content-length: 0
content-type: text/html; charset=UTF-8

以及 302 响应标头：

Request Method: GET
Status Code: 200 
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Headers: access-control-allow-origin
access-control-allow-methods: GET, POST, GET, OPTIONS, PUT, DELETE
access-control-allow-origin: *
content-type: application/json; charset=UTF-8

Answer 1

因为您使用的是 mode: no-cors，所以您将获得不透明的响应。这是作为一种安全机制发生的，因为您正在避免 CORS 验证。因此，为了确保安全，响应的内容无法从 JS 代码访问，它只能用于缓存目的。

更新：据我所知，您可能使用了 no-cors，因为您遇到了 CORS 问题，正如您所说，因为您正在消耗来自另一个域的资源，与 API 的域不同。

为了实现这一目标，您需要：

• 修改您的 API 以将运行前端应用程序的域添加到批准的来源列表中，以便您能够使用该 API 或
• 让您的前端应用程序与 API 在同一台服务器上运行