背景
在 chrome 插件页面中调用 api 存在跨域问题(CORS Error)
环境
- Chrome plugin: v3
- vue: ^3.2.13
- vue-i18n: ^9.9.0
错误信息
接口调用失败:CORS Error
解决方案
核心思路:在 service_worker.js 中发起接口调用。
通过 Chrome 插件的消息机制:chrome.runtime.sendMessage
将插件的请求转发中 service_worker.js 使用 fetch
调用,再将响应内容发送回插件。
相关代码
插件:
export function externalService(message) {
return new Promise((resolve) => {
chrome.runtime.sendMessage(message, resolve);
});
}
service_worker:
chrome.runtime.onMessage.addListener(function (request,sender,sendResponse){
new Promise((resolve, reject) => {
try {
fetch(request.baseURL, {
method: request.method,
credentials: 'include',
body: JSON.stringify(request.body),
}).then((res) => {
if (res) {
return res.json();
} else {
return {};
}
}).then(data => {
resolve(data);
}).catch(err => {
reject(err);
})
} catch (err) {
reject(err)
}
}).then(res => {
sendResponse(res)
})
return true;
}
注意
一定要在 manifest.json 开启 host_permissions
权限:
"host_permissions": ["*://*/*"]
相关API
https://developer.chrome.com/docs/extensions/reference/api/permissions?hl=zh-cn