当我尝试从我的Chrome扩展程序的后台脚本进行请求时，出现了CORS错误。该后台脚本与webpack捆绑在一起。
注意：如果我将manifest.json转换为版本2，则一切正常。但是使用v3会出现以下错误：
由于CORS策略，已阻止从源'chrome-extension://exampleid'访问'https://example.com/api/user/login'。所请求的资源上没有'Access-Control-Allow-Origin'标头。如果不需要访问响应正文，请将请求的模式设置为'no-cors'以禁用CORS获取资源。
manifest.json
{
"name": "__CE_APP_NAME__",
"version": "__CE_APP_VERSION__",
"manifest_version": 3,
"background": {
"service_worker": "background.bundle.js",
"type": "module"
},
"content_scripts": [
{
"matches": [
"https://example.com/*"
],
"js": ["content.bundle.js"]
}
],
"web_accessible_resources": [
{
"resources": [ "images/*", "*.css" ],
"matches": [
"https://example.com/*"
]
}
],
"permissions": [
"storage",
"unlimitedStorage",
"cookies",
"identity"
],
"host_permissions": [
"<all_urls>"
]
}
background.js
chrome.runtime.onMessage.addListener((req) => {
if (req.type === 'auth/login') {
login(req.payload);
}
return true;
});
interface LoginCredentials {
email: string;
password: string;
}
const login = (data: LoginCredentials) => {
fetch(`${API_BASE_URL}/user/login`, {
method: 'POST',
body: new URLSearchParams({
email: data.email,
password: data.password
})
})
.then((response) => console.log(response))
.catch((error) => console.log(error));
};