【chrome扩展开发】插件中调用接口存在跨域问题（CORS Error）_chrome vue跨域

背景

在 chrome 插件页面中调用 api 存在跨域问题（CORS Error）

环境

• Chrome plugin: v3
• vue: ^3.2.13
• vue-i18n: ^9.9.0

错误信息

接口调用失败：CORS Error
1

解决方案

核心思路：在 service_worker.js 中发起接口调用。
通过 Chrome 插件的消息机制：chrome.runtime.sendMessage 将插件的请求转发中 service_worker.js 使用 fetch 调用，再将响应内容发送回插件。

相关代码

插件：

export function externalService(message) {
    return new Promise((resolve) => {
        chrome.runtime.sendMessage(message, resolve);
    });
}
1
2
3
4
5

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

注意

一定要在 manifest.json 开启 host_permissions 权限：

"host_permissions": ["*://*/*"]
1

相关API

https://developer.chrome.com/docs/extensions/reference/api/permissions?hl=zh-cn