无法在 'WorkerGlobalScope' 上执行 'fetch'
Failed to execute 'fetch' on 'WorkerGlobalScope'
我试图从网络工作者内部的服务器获取数据。但是每次在开发工具中我都会遇到同样的错误。
Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'WorkerGlobalScope': Failed to parse URL from /api/books
我看到 关于服务人员的回答,但它对我不起作用。
WebWorker文件代码!
// data-handling.web-worker.js
const workercode = () => {
onmessage = async e => {
const res = await fetch('/api/books');
postMessage(res);
}
};
let code = workercode.toString();
code = code.substring(code.indexOf('{')+1, code.lastIndexOf('}'));
const blob = new Blob([code], {type: 'application/javascript'});
const worker_script = URL.createObjectURL(blob);
export default worker_script;
在 React 组件中导入。
import data_handling_worker from "./data-handling.web-worker";
const dataHandlingWorker = new Worker(data_handling_worker);
运行 并在挂钩内发布消息!
const [searchQuery, setSearchQuery] = useState('');
const [booksList, setBooksList] = useState([]);
useEffect(() => {
dataHandlingWorker.postMessage(searchQuery);
}, [searchQuery]);
useEffect(() => {
dataHandlingWorker.onmessage = (m) => {
setBooksList(m.data);
};
}, []);
从 blob://
URI 创建的工人有他们的 baseURI
set to set to that blob://
URI。
要获取相对 URL,浏览器首先必须从当前领域的 baseURI
.
构建一个绝对 URI
因此在您的情况下,浏览器将尝试使用 blob:[origin]/[UUID]
作为基础从 /api/books
生成绝对 URL。 这就是抛出的东西:
const worker_script = `
postMessage( { baseURI: self.location.href } );
try {
const absolute = new URL( "api/books", self.location.href );
}
catch( err ) {
postMessage( { err: err.toString() } );
}
`;
const worker_url = URL.createObjectURL( new Blob( [ worker_script ] ) );
const worker = new Worker( worker_url );
worker.onmessage = (evt) => console.log( evt.data );
要解决该问题,您有两个选择:
使用绝对值URL。这样你就不会遇到那个问题了。
将 baseURI
从您的主线程传递到您的 Worker 脚本。这样您就可以使用 URL constructor.
自己创建绝对值 URL
第一个选项非常简单,所以我想您不需要示例。
其次,由于我们无法在 StackSnippets 中托管相关文件,I had to host it in this plunker.
代码如下:
const worker_script = `
onmessage = (evt) => {
const base = evt.data;
const absolute = new URL( "api/books", base );
fetch( absolute )
.then( (resp) => resp.text() )
.then( (txt) => postMessage( txt ) )
.catch( console.error );
};
`;
const worker_url = URL.createObjectURL( new Blob( [ worker_script ] ) );
const worker = new Worker( worker_url );
worker.onmessage = (evt) => document.body.append( evt.data );
// pass the main thread's baseURI
worker.postMessage( document.baseURI );
我的问题是我想根据缓存做出条件响应。
我正在使用请求对象并注意这个 post 并使用绝对 url 解决了问题。
const respuesta = caches.match('codeGalery/cat.jpg')
.then((response) =>
{
if (response !== undefined)
{
return response;
}
//wrong
//return fetch(FetchEvent.request, {credentials:"same-origin"});
//correct
return fetch(FetchEvent.request.url, {credentials:"same-origin"});
});
我试图从网络工作者内部的服务器获取数据。但是每次在开发工具中我都会遇到同样的错误。
Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'WorkerGlobalScope': Failed to parse URL from /api/books
我看到
WebWorker文件代码!
// data-handling.web-worker.js
const workercode = () => {
onmessage = async e => {
const res = await fetch('/api/books');
postMessage(res);
}
};
let code = workercode.toString();
code = code.substring(code.indexOf('{')+1, code.lastIndexOf('}'));
const blob = new Blob([code], {type: 'application/javascript'});
const worker_script = URL.createObjectURL(blob);
export default worker_script;
在 React 组件中导入。
import data_handling_worker from "./data-handling.web-worker";
const dataHandlingWorker = new Worker(data_handling_worker);
运行 并在挂钩内发布消息!
const [searchQuery, setSearchQuery] = useState('');
const [booksList, setBooksList] = useState([]);
useEffect(() => {
dataHandlingWorker.postMessage(searchQuery);
}, [searchQuery]);
useEffect(() => {
dataHandlingWorker.onmessage = (m) => {
setBooksList(m.data);
};
}, []);
从 blob://
URI 创建的工人有他们的 baseURI
set to set to that blob://
URI。
要获取相对 URL,浏览器首先必须从当前领域的 baseURI
.
因此在您的情况下,浏览器将尝试使用 blob:[origin]/[UUID]
作为基础从 /api/books
生成绝对 URL。 这就是抛出的东西:
const worker_script = `
postMessage( { baseURI: self.location.href } );
try {
const absolute = new URL( "api/books", self.location.href );
}
catch( err ) {
postMessage( { err: err.toString() } );
}
`;
const worker_url = URL.createObjectURL( new Blob( [ worker_script ] ) );
const worker = new Worker( worker_url );
worker.onmessage = (evt) => console.log( evt.data );
要解决该问题,您有两个选择:
使用绝对值URL。这样你就不会遇到那个问题了。
将
baseURI
从您的主线程传递到您的 Worker 脚本。这样您就可以使用 URL constructor. 自己创建绝对值 URL
第一个选项非常简单,所以我想您不需要示例。 其次,由于我们无法在 StackSnippets 中托管相关文件,I had to host it in this plunker.
代码如下:
const worker_script = `
onmessage = (evt) => {
const base = evt.data;
const absolute = new URL( "api/books", base );
fetch( absolute )
.then( (resp) => resp.text() )
.then( (txt) => postMessage( txt ) )
.catch( console.error );
};
`;
const worker_url = URL.createObjectURL( new Blob( [ worker_script ] ) );
const worker = new Worker( worker_url );
worker.onmessage = (evt) => document.body.append( evt.data );
// pass the main thread's baseURI
worker.postMessage( document.baseURI );
我的问题是我想根据缓存做出条件响应。
我正在使用请求对象并注意这个 post 并使用绝对 url 解决了问题。
const respuesta = caches.match('codeGalery/cat.jpg')
.then((response) =>
{
if (response !== undefined)
{
return response;
}
//wrong
//return fetch(FetchEvent.request, {credentials:"same-origin"});
//correct
return fetch(FetchEvent.request.url, {credentials:"same-origin"});
});