跨域读取阻止 (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 扩展的主要内容,如果未能解决你的问题,请参考以下文章
Chrome 73 中阻止的 CORB OPTIONS 请求
跨域读取阻止 (CORB) 阻止了跨域响应 https://cdnjs.com/libraries/Chart.js
ajax 发布请求 - 跨域读取阻塞 (CORB) 阻止跨域响应 CORS