跨域读取阻止 (CORB) API-调用 Chrome 扩展

Posted

技术标签:

【中文标题】跨域读取阻止 (CORB) API-调用 Chrome 扩展【英文标题】:Cross-Origin Read Blocking (CORB) API-Call Chrome-extension 【发布时间】:2019-10-22 01:54:52 【问题描述】:

我想通过我的 chrome-extension 的 post 调用一个 api,问题是没有得到响应数据。

我刚刚在控制台中获得了跨域读取阻塞 (CORB),响应为空。

跨域读取阻塞 (CORB) 阻止了 MIME 类型为 application/json 的跨域响应 http://127.0.0.1:8080/api/v1/login/ldap。详情请见https://www.chromestatus.com/feature/5629709824032768。

首先我尝试直接调用 ajax:

$.ajax(
            type:    'POST',
            url:     'http://127.0.0.1:8080/api/v1/login/local',
            data:    postBody,
            success: function(resData, status, jqXHR) 
                console.log(resData, status, jqXHR);
            ,
            error:   function(jqXHR, status) 
                console.log(jqXHR, status);
            
        );

我试图像这样将我的 ajax 调用从 content.js 移动到 background.js

background.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) 
        if(request.contentScriptQuery === 'login') 
            $.ajax(
                type:    'POST',
                url:     'http://127.0.0.1:8080/api/v1/login/local',
                data:    postBody,
                success: function(resData, status, jqXHR) 
                    sendResponse([
                        
                            resData: resData,
                            status:  status,
                            jqXHR:   jqXHR
                        , null
                    ]);
                ,
                error:   function(jqXHR, status) 
                    sendResponse([
                        null, 
                            status: status,
                            jqXHR:  jqXHR
                        
                    ]);
                
            );
        
//right here?
return true;
    );

content.js

chrome.runtime.sendMessage(contentScriptQuery: 'login', messageResponse =>
            console.log(messageResponse);
        );

但在这种情况下,我收到以下错误:

"未检查的 runtime.lastError: 消息端口在 a 之前关闭 已收到回复。”

我不知道如何保持端口打开并接收请求正文。或者即使我得到了一个身体或仍然得到了corb问题。

这是我从今天开始的最后一次尝试,端口仍然关闭 :-(

"未检查的 runtime.lastError: 消息端口在 a 之前关闭 已收到回复。”

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) 
    if(request.contentScriptQuery === 'loginLocal') 
        $.ajax(
            type: 'POST',
            url:  'http://127.0.0.1:8080/api/v1/login/local',
            data: postBody
        ).then(function(resData, status, jqXHR) 
            sendResponse([
                
                    statuscode: jqXHR.status,
                    resData:    resData,
                    status:     status
                , null
            ]);
        , function(jqXHR, status) 
            sendResponse([
                null, 
                    statuscode: jqXHR.status,
                    status:     status
                
            ]);
        );
        return true;
    
);

【问题讨论】:

你需要return true 在 onMessage 侦听器的末尾保持通道为 sendResponse 打开。 就在最后一个 之前)或者我必须在哪里添加它。因为我使用ajax而更难? -> 我在我的问题中添加了它。如果它就在那里,它就不起作用:-( 确保单击 chrome://extensions 页面中的重新加载图标并重新加载网页。我也不认为jqXHR 可以通过消息传递,因为它包含功能,无论如何你都不应该在你的内容脚本中需要它。 ***.com/a/55215898/441757 和 ***.com/a/55156266/441757 和 ***.com/a/55175483/441757 可能相关(或可能不相关……) @sideshowbarker 抱歉,他们没有帮助我。我对过早关闭的消息端口有疑问。 【参考方案1】:

我改为 sendRequest - 对我有用:

content.js

chrome.extension.sendRequest(contentScriptQuery: 'login', function(messageResponse) 
            const[response, error] = messageResponse;
            if(response === null)
                console.log(error);
             else 
                console.log(response.resData);
            
);

background.js

chrome.extension.onRequest.addListener(function (message, sender, sendResponse) 
        if(message.contentScriptQuery === 'login') 
            $.ajax(
                type: 'POST',
                url:  'http://127.0.0.1:8080/api/v1/login/local',
            ).then(function(resData, status, jqXHR) 
                sendResponse(sendResponse([
                    
                        resData: resData,
                        status:  status
                    , null
                ]));
            , function(jqXHR, status) 
                    sendResponse([
                        null, 
                            status: status
                        
                    ]);
            );

            return true;
        
    );

【讨论】:

以上是关于跨域读取阻止 (CORB) API-调用 Chrome 扩展的主要内容,如果未能解决你的问题,请参考以下文章

如何解决此问题:跨域读取阻塞 (CORB) 阻止了跨域响应

Chrome 73 中阻止的 CORB OPTIONS 请求

跨域读取阻止 (CORB) 阻止了跨域响应 https://cdnjs.com/libraries/Chart.js

ajax 发布请求 - 跨域读取阻塞 (CORB) 阻止跨域响应 CORS

使用带有 Nuxt js 的 axios 从 Directions API 获取数据时的跨域读取阻塞 (CORB)

CORB:JSFiddle 上的跨域读取阻塞