Same issue. But what is particular in my situation is that I need to fetch a blob url, like «blob:https://images.google.com.hk/9143673d-b976-4416-b29c-85ce48a77da6».
However, if I declare manifest.json as
{
...
"permissions": [
"blob:*",
]
}
Firefox does not recognize it, and throws a warning message, «Reading manifest: Warning processing permissions: Error processing permissions.1: Value «blob:» must either: must either [must either [be one of [«clipboardRead», «clipboardWrite», «geolocation», «idle», «notifications»], be one of [«bookmarks»], be one of [«find»], be one of [«history»], be one of [«menus.overrideContext»], be one of [«search»], be one of [«topSites»], be one of [«activeTab», «tabs», «tabHide»], be one of [«browserSettings»], be one of [«cookies»], be one of [«downloads», «downloads.open»], be one of [«privacy»], be one of [«webNavigation»], or be one of [«webRequest», «webRequestBlocking»]], be one of [«alarms», «mozillaAddons», «storage», «unlimitedStorage»], be one of [«captivePortal»], be one of [«browsingData»], be one of [«devtools»], be one of [«identity»], be one of [«menus», «contextMenus»], be one of [«normandyAddonStudy»], be one of [«pkcs11»], be one of [«geckoProfiler»], be one of [«sessions»], be one of [«urlbar»], be one of [«contextualIdentities»], be one of [«dns»], be one of [«activityLog»], be one of [«management»], be one of [«networkStatus»], be one of [«proxy»], be one of [«nativeMessaging»], be one of [«telemetry»], be one of [«theme»], or match the pattern /^experiments(.w+)+$/], or must either [be one of [«<all_urls>»], must either [match the pattern /^(https?|wss?|file|ftp|*)://(*|*.[^*/]+|[^*/]+)/.$/, or match the pattern /^file:///.$/], or match the pattern /^resource://(*|*.[^*/]+|[^*/]+)/.$|^about:/]»
Maybe the pattern /^(https?|wss?|file|ftp|*)://(*|*.[^*/]+|[^*/]+)/.*$/ can provide some hints, but useless for a blob URL. 😞
I don’t need to declare any permission about blob URL at chrome.
All right, it looks like <all_urls> is the only way.
Содержание
- TypeError: NetworkError when attempting to fetch resource — firefox issue #310
- Comments
- Footer
- TypeError: NetworkError when attempting to fetch resource #6095
- Comments
- Using Web3 0.20.7
- Using Web3 1.0.0-beta41
- Ошибка NetworkError when attempting to fetch resource.
- Сообщений [ 6 ]
- 1 Тема от Александр 26.08.2021 15:10:24
- Тема: Ошибка NetworkError when attempting to fetch resource.
- 2 Ответ от admin 26.08.2021 20:15:24
- Re: Ошибка NetworkError when attempting to fetch resource.
- 3 Ответ от Александр 26.08.2021 20:57:28
- Re: Ошибка NetworkError when attempting to fetch resource.
- Почему периодически возникает ошибка NetworkError when attempting to fetch resource?
TypeError: NetworkError when attempting to fetch resource — firefox issue #310
Hi, I have simple function for logout that looks like this
It is workin in chrome but in firefox I get «TypeError: NetworkError when attempting to fetch resource.1 (unknown)». Client side app is on the same server as backend, I’m using https connection with self-signed cert, could it be the issue?
The text was updated successfully, but these errors were encountered:
Firefox contains a native fetch implementation and does not use this polyfill code. You can use the Network tab in Firefox’s web console to debug the request and response.
On chrome, I’ve got «TypeError: Failed to fetch»
On firefox, the same «TypeError: NetworkError when attempting to fetch resource»
..
Have you check errors like CORS?
@ariden83 did you figure out what was causing the errors? I’m seeing the same issues in isolated cases
Can we reopen this ticket?
I’m seeing the same error, but only on Firefox.
Also, nothing shows up in the Network tab.
There maybe relational link.
I’m seeing the same error,except chrome
I have the same exact issue. everything is fine in chrome but firefox caches wrong fetch response. and the worst of all is that it caches this error as response of that particular endpoint of my api for a LONG time.
Having the same issue when I have network.http.referer.XOriginPolicy set to 1 («send a referrer only when the base domains are the same»). Is that supposed to happen? I’m quite sure the base domain of localhost matches the base domain of itself 🙂
I was accessing Function app, via Logic app, when I got the above error.
Following worked for me:
- Function app > Platform features tab > API > CORS > Allowed Origins > (remove all, Save)
- Function app > Platform features tab > API > CORS > Allowed Origins > * > Save (that is add * and save)
- Function app > Overview tab > Restart
Hope that helps.
@manoharreddyporeddy function app > platform features tab etc
what are those?
@aguayUmbt they are menu/sequence of operations to be done in the Azure portal
@jcimoch, I am having the same issue. Please tell me how to debug it. 🙂
For those who are writing Firefox addon, the solution here helped me, I have to add «*://localhost/*»
to permissions key in manifest.json :
Chrome just works without the need to add this permission.
If anyone comes across this, I had the same error in Firefox (but with a different application) and it turns out it was because the (self-signed) SSL certificate I was using on the server was not trusted in Firefox. I added the self-signed root CA to Firefox and all was well.
In our case, the solution was not using the wild card for Access-Control-Allow-Origin on the server side, instead of the wild card, our settings look like this:
Check if you are using http or https on your server. For me, the error was coming online with heroku server because they use https while in local machine I was using http and it was working.
After choosing https on Heroku for my endpoints, it also worked
I managed to solve the problem by monitoring the headers returned by github used on the demo page.
Since I’m using a python webserver, they look something like this:
For me, Swagger UI for some reason crashes when I use examples that consume multilanguage resource files. So I removed the examples from Swagger config and Swager UI started working properly again — of course, without examples.
Tried in a Rails 6 only-api app with CORS enabled, using NGROK and no luck.
and got it working.
Same issue. But what is particular in my situation is that I need to fetch a blob url, like «blob:https://images.google.com.hk/9143673d-b976-4416-b29c-85ce48a77da6».
However, if I declare manifest.json as
Firefox does not recognize it, and throws a warning message, «Reading manifest: Warning processing permissions: Error processing permissions.1: Value «blob:» must either: must either [must either [be one of [«clipboardRead», «clipboardWrite», «geolocation», «idle», «notifications»], be one of [«bookmarks»], be one of [«find»], be one of [«history»], be one of [«menus.overrideContext»], be one of [«search»], be one of [«topSites»], be one of [«activeTab», «tabs», «tabHide»], be one of [«browserSettings»], be one of [«cookies»], be one of [«downloads», «downloads.open»], be one of [«privacy»], be one of [«webNavigation»], or be one of [«webRequest», «webRequestBlocking»]], be one of [«alarms», «mozillaAddons», «storage», «unlimitedStorage»], be one of [«captivePortal»], be one of [«browsingData»], be one of [«devtools»], be one of [«identity»], be one of [«menus», «contextMenus»], be one of [«normandyAddonStudy»], be one of [«pkcs11»], be one of [«geckoProfiler»], be one of [«sessions»], be one of [«urlbar»], be one of [«contextualIdentities»], be one of [«dns»], be one of [«activityLog»], be one of [«management»], be one of [«networkStatus»], be one of [«proxy»], be one of [«nativeMessaging»], be one of [«telemetry»], be one of [«theme»], or match the pattern /^experiments(.w+)+$/], or must either [be one of [«»], must either [match the pattern /^(https?|wss?|file|ftp|*)://(*|*.[^*/]+|[^*/]+)/.$/, or match the pattern /^file:///.$/], or match the pattern /^resource://(*|*.[^*/]+|[^*/]+)/.$|^about:/]»
Maybe the pattern /^(https?|wss?|file|ftp|*)://(*|*.[^*/]+|[^*/]+)/.*$/ can provide some hints, but useless for a blob URL. 😞
I don’t need to declare any permission about blob URL at chrome.
All right, it looks like is the only way.
I had this problem and turned out that someone had put redirection (window.location = ‘/’) not in the promise’s resolve function, but immediately after the fetch call, so the application was aborting the call and redirecting to the index.
© 2023 GitHub, Inc.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Источник
TypeError: NetworkError when attempting to fetch resource #6095
This issue seems to exists in #1779 (and #2301), but both have been closed long ago, even though the problem is not solved, at least not for me. Since I cannot reopen it and get no answer to my comments there, I open a new bug and provide all the information I have. Unfortunately the whole source code is too huge to append, so I provide the snippets where the problem occurs.
Describe the bug
- react 16.7.0
- web3, tested 1.0.0-beta.41 and 0.20.7
- canache-cli 6.2.5
- canache-code 2.3.3
- Firefox Quantum 64.0
- Metamask 5.3.2, also tested backgrade to 5.3.0
Without Metamask the exactly same code works (using the fallback to localhost, connecting to canache-cli). In a nodejs / express environment without react, it works. So I suppose, it is something about Metamask and React in combination.
startup of canache:
first error message is TypeError: NetworkError when attempting to fetch resource on line await window.ethereum.enable(); in the following Initiatlization code:
Using Web3 0.20.7
On line await window.ethereum.enable(); , I always get an error:
At the end, creating a contract, web3 fails with silly error messages without a useful context, such as:
Using Web3 1.0.0-beta41
Same in web3 1.0.0-beta41:
The message Weitere Informationen links to a Firefox page.
When I try to deploy a contract in Web3 1.0.0-beta41, I get no more information than:
To Reproduce
Steps to reproduce the behavior:
- Setup a react app
- Use the above initialisation code
- Use Metamask in Firefox
- See error in console
- Try to deploy a contract
- See the second error message
Expected behavior
Web3 should be correctly initialized, a contract should be deployed.
Browser details (please complete the following information):
- OS: Ubuntu 18.04
- Browser Firefox Quantum 64.0
- MetaMask Version 5.3.2
Additional context
The code, where the contract is deployed:
The text was updated successfully, but these errors were encountered:
Источник
Ошибка NetworkError when attempting to fetch resource.
Форум ReadyScript Вопросы по работе с системой Ошибка NetworkError when attempting to fetch resource.
Чтобы отправить ответ, вы должны войти или зарегистрироваться
Сообщений [ 6 ]
1 Тема от Александр 26.08.2021 15:10:24
- Александр
- Новый участник
- Неактивен
- Зарегистрирован: 26.08.2021
- Сообщений: 4
Тема: Ошибка NetworkError when attempting to fetch resource.
Установил систему для ознакомления и тестирования на локальном сервере (с доменной зоной .local).
Два дня было все нормально. Все работало без сбоев.
Сейчас при попытке добавить товар в корзину стала появляется ошибка NetworkError when attempting to fetch resource и сайт подвисает.
При попытке перейти в корзину так же появляется эта ошибка.
После перезагрузки локального сервера и обновления страницы показывает, что в корзине есть товары. Но при попытке добавить еще товар происходит то же самое и та же самая ошибка.
2 Ответ от admin 26.08.2021 20:15:24
- admin
- в работе
- Неактивен
- Откуда: Краснодар
- Зарегистрирован: 19.06.2014
- Сообщений: 1,080
- Рейтинг: 146
Re: Ошибка NetworkError when attempting to fetch resource.
Посмотрите, какой статус ответа от запроса на сервер на вкладке Network.
Если 503, то выполните это https://readyscript.ru/faq/#faq-errors и после этого еще раз посмотрите на Response на вкладке Network, там должна быть ошибка в развернутом виде.
На упреждение:
Проверьте значение в phpinfo() — mb_string.func_overload, должно быть = 0
Проверьте, чтобы в mysql был отключен strict mode, т.е. было sql_mode = »[пустые кавычки] в my.cfg
3 Ответ от Александр 26.08.2021 20:57:28
- Александр
- Новый участник
- Неактивен
- Зарегистрирован: 26.08.2021
- Сообщений: 4
Re: Ошибка NetworkError when attempting to fetch resource.
1) Вот с этими пунктами все ОК:
Проверьте значение в phpinfo() — mb_string.func_overload, должно быть = 0
Проверьте, чтобы в mysql был отключен strict mode, т.е. было sql_mode = »[пустые кавычки] в my.cfg
2) Посмотрите, какой статус ответа от запроса на сервер на вкладке Network.
По этому пункту вообще ничего, никаких статусов в ответе нет на вкладке Network. Система (сайт на frontend) пытается добавить товар в корзину и просто зависает. Приходится перезагружать сервер (Openserver).
Два дня было все ок, а потом вот так вот стало. На сервере ничего не перенастраивал.
Только устанавливал модули из магазина приложений. Возможно из-за какого то модуля.
Попробую еще раз выполнить чистую установку системы и потом следить при каждой установке дополнительного модуля, может после установки какого модуля это снова произойдет.
Источник
Почему периодически возникает ошибка NetworkError when attempting to fetch resource?
Делаю вот такой запрос:
Почему, обычно при первой загрузке, выдает ошибку TypeError: «NetworkError when attempting to fetch resource.» Иногда все нормально и все загружается иногда нет.
Подскажите плиз что это за ошибка, почему она возникает и как ее решить. Заранее спасибо!
- Вопрос задан более двух лет назад
- 6326 просмотров
Простой 18 комментариев
Хотел помочь но прочитав комменты передумал.
Подскажите плиз что это за ошибка, почему она возникает и как ее решить
Виктор Поляков, «Вот как ты думаешь, зачем создали тостер?» — тостер это q&a, то есть сервис вопросов и ответов, что-то типа базы знаний к которой можно обратиться при случае. Не сервис IT помощи для ленивых, а именно база знаний, как stackoverflow
«Мне лично это не помогло» — и как раз суть q&a не в том, чтобы ответы помогали кому-то лично в их конкретных рабочих задачах, а в обмене опытом и знаниями.
В вашем случае мне кажется достаточно очевидно, что если ошибка сетевая, то виновник тут не реакт или js, а кто-то другой — может быть человек который криво написал вам сервис, а может быть кот который играет с проводом питания роутера. Проблема не на вашей стороне короче
Robur, Да я уже получил ответ на свой вопрос. Помогли НОРМАЛЬНЫЕ люди которые умеют нормально объяснять, а главное без закидонов. Что-то там это у Вас, а у меня обычная аллергия на свинское отношение.
Хорошо, приведем пример, Вы задаете вопрос, из обычной жизни. К примеры обращаетесь ко мне и спрашиваете как пройти к такому-то магазину.
Я вместо ответа: ну к магазину можешь пройти по асфальту, который находится на дороге, что тут сложного.
Вы отвечаете, да я понял что по асфальту и по дороге, зачем так отвечать, неужели сложно нормально подсказать.
Я: Ну раз ты не можешь включить свой мозг и посмотреть по навигатору, то это очень печально.
Вы: Да я смотрел, но к сожалению не нашел. Если не хотите помогать то не надо выделываться.
Подходит прохожий: Ну вам же сказали по дороге зачем вы грубите. Что тут не понятного. Теперь я Вам тоже дорогу не покажу.
Я вроде как ответил на вопросы, но само содержание ответа, разве может считаться нормальным??
Если уж проводить аналогию, то правильнее будет так:
Вы обращаетесь к прохожему и спрашиваете как пройти к таком-то магазину.
Прохожий: «Разве вы не видите, вон вывеска, вам через дорогу напротив».
Вы отвечаете: «да ладно?))) Вот ты Америку открыл))) А то я по сторонам не посмотрел сначала? Я что, по твоему слепой, что мне эта вывеска?».
Прохожий: Ну раз вы не можете включить свой мозг и пойти туда где вывеска, то это очень печально.
Вы: «Ну ты и мудила. Пойду поспрашиваю у тех кто нормально ответит!»
и дальше топчитесь на месте, громко возмущаясь, рассказывая всем людям как вам тут нахамили с криками «я не потерплю!» «я недавно здесь» «А вот за границей мне бы вежливо ответили» «да я таких посылать буду сразу же» «ответ — посмотри по сторонам — это не для нашего города!!» и так далее.
Хотя можно было сказать «а, точно, вывеска, вон же он, спасибо» и за 2 минуты попасть куда вам надо.
Виктор Поляков, да какие взгляды — я просто заменил в вашем примере вежливые фразы которых там в оригинале не было на слова которые действительно были в диалоге и комментариях после. Практически скопипастил.
Если вам не нравится как это выглядит со стороны настолько что вы называете это «моим взгялом», ну, дело ваше, вам тоже всего хорошего, и поменьше видеть принижений и издевок вокруг себя.
Больше сил и времени останется на изучение технологий и профессиональный рост.
Прочитал, и еще раз убедился, что рашен-комьюнити недопрограммистов полный отстой, мнят себя божничкой, а сами работают в Залупинске где-нибудь типа IT в отделе. зарплата маленькая, тёлка страшная да и та не дает, квартира в ипотеку, приходится хоть как-то самооценку свою поднимать, только она тут Н@хуй ни кому не интересна.
Если бы такой педик, к которому чел обратился бы за советом, работал в гугле или фейсбуке, а тот бы его послал гуглить, то на хyй бы вылетел с работы на следующий день, потому что, там ценят дух взаимоподдержки и роста для начинающих, и когда к ним обращаются за обычным советом челики уровня 1-2, то более умные стараются максимально помочь, потому что те своим ростом поднимают более умных вверх по карьере.
Но Вам, обезьянкам, (как в Штатах вас называют, «программистов» из России) это не грозит, потому что, таких бакланов как Вы, в комьюнити нормальных пацанов нет и быть не может.
Так что сидеть тут , и писать какие вы охyенные это ваш реальный предел.
Мечтайте в своем забвении, что может кто-то из комьюнити Хабра и подберет вас, на вшивую работенку.
Источник
-
Home
- javascript — macOS Firefox fails to upload files on POST request, if file size exceeds 20mb: `TypeError: NetworkError when attempting to fetch resource.`
925 votes
0 answers
Get the solution ↓↓↓
For a project, I want to record people using their webcams. Since this can create large video files, I increased myphp.ini’supload_max_filesize andpost_max_size to500M. Everything is working great in chromium-based browsers under all operating systems.
However, in Firefox running under macOS, I get an error when the video file exceeds 20MB, which results in that the video does not get uploaded. Yet, Firefox on Windows and Linux (Ubuntu) does not cause this error.
The error message on the Firefox console is:TypeError: NetworkError when attempting to fetch resource.
I created a minimal demo here:
https://ccp-odc.eva.mpg.de/modal-recorder/demo/example.html
BE AWARE! If you hit Upload Recorded Video, the videos are stored on my server! Do not record yourself!
Steps to reproduce:
0. Open the network tab
Click StartRecorder()(step 5) button (accept the consent) — under the hood, this will start the MediaRecorder API and creates a blob in the window object.- Wait at least 2 minutes (to reach at least 20mb)
- Hit the Upload Recorded Video button (see the network tab, and console) — under the hood I create a new
FormData()object and I append the blob to it. Then, I use fetch/POST to send this to the PHP endpoint
FYI; This demo is the bundled version of this repo: https://github.com/ccp-eva/media-recorder
The three important files are the HTML file, the corresponding JavaScript file, and the PHP endoint. You fine the three files here:
- https://github.com/ccp-eva/media-recorder/blob/main/public/example.html#L94
- https://github.com/ccp-eva/media-recorder/blob/main/src/components/uploadVideo.js
- https://github.com/ccp-eva/media-recorder/blob/main/public/upload_video.php
So it really seems that this is some specific macOS/Firefox issue. Anyone out there has insights why this is happening in Firefox?
2021-10-25
Write your answer
Share solution ↓
Additional Information:
Date the issue was resolved:
2021-10-25
Link To Source
Link To Answer
People are also looking for solutions of the problem: cannot use isset() on the result of an expression (you can use «null !== expression» instead)
Didn’t find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.
About the technologies asked in this question
PHP
PHP (from the English Hypertext Preprocessor — hypertext preprocessor) is a scripting programming language for developing web applications. Supported by most hosting providers, it is one of the most popular tools for creating dynamic websites.
The PHP scripting language has gained wide popularity due to its processing speed, simplicity, cross-platform, functionality and distribution of source codes under its own license.
https://www.php.net/
JavaScript
JavaScript is a multi-paradigm language that supports event-driven, functional, and mandatory (including object-oriented and prototype-based) programming types. Originally JavaScript was only used on the client side. JavaScript is now still used as a server-side programming language. To summarize, we can say that JavaScript is the language of the Internet.
https://www.javascript.com/
HTML
HTML (English «hyper text markup language» — hypertext markup language) is a special markup language that is used to create sites on the Internet.
Browsers understand html perfectly and can interpret it in an understandable way. In general, any page on the site is html-code, which the browser translates into a user-friendly form. By the way, the code of any page is available to everyone.
https://www.w3.org/html/
Welcome to programmierfrage.com
programmierfrage.com is a question and answer site for professional web developers, programming enthusiasts and website builders. Site created and operated by the community. Together with you, we create a free library of detailed answers to any question on programming, web development, website creation and website administration.
Get answers to specific questions
Ask about the real problem you are facing. Describe in detail what you are doing and what you want to achieve.
Help Others Solve Their Issues
Our goal is to create a strong community in which everyone will support each other. If you find a question and know the answer to it, help others with your knowledge.
When trying to access the Google Developer Profile webpage on Firefox desktop, I encounter many errors. I can’t sign in a lot of the times, sometimes I kind of get in but it says my profile isn’t finished even though it is. I ended up creating it with MS Edge and accessing it that way after I had done a couple of the Kotlin training exercises to make sure my progress was getting saved. Many other times I get a 404 message; the errors I get vary a bit.
I have even tried starting Firefox in safe mode just to disable all extensions and add-ons, still with no luck.
It is only with Firefox Desktop that I am having this issue. When I use my Android device and bring it up on Firefox mobile, I don’t have any of these issues. I see my profile and badges just fine.
When trying to access the Google Developer Profile webpage on Firefox desktop, I encounter many errors. I can’t sign in a lot of the times, sometimes I kind of get in but it says my profile isn’t finished even though it is. I ended up creating it with MS Edge and accessing it that way after I had done a couple of the Kotlin training exercises to make sure my progress was getting saved. Many other times I get a 404 message; the errors I get vary a bit.
I have even tried starting Firefox in safe mode just to disable all extensions and add-ons, still with no luck.
It is only with Firefox Desktop that I am having this issue. When I use my Android device and bring it up on Firefox mobile, I don’t have any of these issues. I see my profile and badges just fine.
Выбранное решение
Hi
I had this issue myself ahead of Google I/O. When I contacted the Google I/O support team (without mentioning Firefox) they recommended private browsing mode — which worked.
Прочитайте этот ответ в контексте
👍 0
Все ответы (7)
The had already turned off the tracking protection without any luck but I am trying the web console which is showing errors. There seem to be cookie errors but when I set the cookie protection to «Standard» to ease up on what it has been blocking, it didn’t resolve the issue.
I have 6 errors listed when not in «Troubleshooting mode», 3 or which are stating «Reason: CORS request did not succeed».
While I do have add-ons of the type it speaks about on the error documentation webpage, I had already turned all of those off for the website. And even while in «Troubleshooting mode» I still have problems.
OK so while in «Troubleshooting mode» & «Enhanced Tracking Protection» is off, the web console shows 4 errors.
2 of them are Cross-Orgin request blocks and stating CORS request no succeeding.
The other 2 state:
Failed to load ‘https://developerprofiles-pa.clients6.google.com/v1/eligibility?key=… ’. A ServiceWorker passed a promise to FetchEvent.respondWith() that rejected with ‘TypeError: NetworkError when attempting to fetch resource.’.
I also have an exclamation stating «Some cookies are misusing the recommended “SameSite“ attribute».
Guess I’ll try clearing out my cookie cache.
Изменено 15 июня 2021 г., 12:08:41 -0800 ACiotti
Update to previous reply that is awaiting Moderator approval. Cleared the cookie cache (and is set to Standard so it allows as much as it can), in Troubleshooting mode, Enhanced Tracking Protection off; had to re-sign in to Google of course from the cleaning of the cookies; still no luck.
I show even more errors in the console now, pretty much the same as the others presented already and this new one:
This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!
Thank you in advance for any information on this.
You can try to create a cookie allow (or allow for session) exception for involved origins to see if that has effect.
I had already made an exception for https://developers.google.com. I have also just tried creating an exception for https://developerprofiles-pa.clients6.google.com so any cookies from there shouldn’t be an issue, nor have I received any notification that needed cookies are being blocked. Still no luck.
It seems like it almost gets in at times, for it will bring up the profile, then if I navigate to a different tab on that same page, such as the dashboard instead of the profile tab, it looses it then I will get varying messages such as a 404, or that my account isn’t eligible for a Developer Profile… even though I already have one on that very same account.
It’s all quite odd. And it is just Firefox desktop that is having this issue, Android FF isn’t nor is Edge.
When I was trying in Troubleshooting mode with cookie allowances set to Standard, shouldn’t that have negated any possible cookie issue though?
Выбранное решение
Hi
I had this issue myself ahead of Google I/O. When I contacted the Google I/O support team (without mentioning Firefox) they recommended private browsing mode — which worked.
Well I just tried that and it seems to be working normally now, even with Enhanced Tracking Protection & my add-ons on. I have no idea why, but it is.
Изменено 15 июня 2021 г., 14:10:27 -0800 ACiotti
This article lists some of the most common issues you might encounter while integrating PSPDFKit for Web.
Styling Issues
When you override styling with general selectors (like svg, img, and div), especially in combination with !important, please be aware this could cause errors in PSPDFKit for Web, and we can’t guarantee correct rendering.
The easiest way to debug styling issues is to remove your own CSS from the site and see if the styling issue in PSPDFKit for Web remains. If the issues are gone after removing your CSS, add your CSS file again and open the developer tools of your browser to inspect elements that have issues. Toggle off stylings that get added by your CSS file — by eliminating each CSS attribute, you’ll find out what causes the problem.
If you want to override certain styles in PSPDFKit for Web, please use our public CSS classes.
“Refused to Apply Style from CSS File Because Its MIME Type Is Not a Supported Stylesheet MIME Type” Error
This error occurs when — while fetching custom stylesheets — the assets server responds without the proper MIME header set, or if instead of responding with the CSS content, it responds with an HTML page (e.g. the path to the stylesheet is wrong and the server is returning a fallback 404 HTML page instead).
Please take a look at this Stack Overflow post for possible solutions.
The Mounting Container Has No Width/Height
PSPDFKit for Web requires an explicit width and height for the used container.
To work with your responsive designs, the width or height can be set to 100 percent. However, the height can be set to 100% only if the parent element has a height that isn’t set to auto. Otherwise, the height of your container will be resolved to 0px and you’ll get an error: “The mounting container has no height.” To fix this issue without changing the parent height, use 100vh, which represents 100 percent of the full viewport height.
Invalid Token
When receiving the “Invalid Token” error, you can debug and verify your token on jwt.io. You’ll also get an error in the server log, where you can see if the token has expired or if the user has no access for the given document.
Customizing the Fit-to-Page and Fit-to-Width Toggle Button
Since we’re using a toggle button to switch between the fit-to-page and fit-to-width zoom modes, we need to use some CSS to overwrite the styles and define a different icon for each zoom mode:
/* We're removing the shown `svg` on both buttons. */ .PSPDFKit-Toolbar-Button-Fit-To-Page svg, .PSPDFKit-Toolbar-Button-Fit-To-Width svg { content: ""; } /* Then we set our own icons. */ .PSPDFKit-Toolbar-Button-Fit-To-Page span { content: url(my-custom-fit-to-page-icon.svg); } .PSPDFKit-Toolbar-Button-Fit-To-Width span { content: url(my-custom-fit-to-width-icon.svg); }
Page Is Zoomed When Using the Trackpad
In Microsoft Edge, the webpage is zoomed when using the pinch-to-zoom gesture on the trackpad. This is because of a different way trackpad gestures are handled. To prevent this, you can still disable the native browser zooming by setting the -ms-content-zooming property to none in the body element of your page:
body {
-ms-content-zooming: none;
}
In other browsers, pinch-to-zoom can be prevented by defining the allowed touch actions. By only allowing pan-x and pan-y, you can prevent the browser from handling pinch and double-tap gestures. Unfortunately, the safest way to prevent this is by defining it for every element. Otherwise, pinch gestures could be emitted by all elements:
* {
touch-actions: pan-x pan-y;
}
“Response Has Unsupported MIME Type” Error
When using the standalone deployment in browsers that support WebAssembly streaming instantiation, the pspdfkit.wasm file must be served with the correct content type header: Content-Type: application/wasm. When the server is not configured to do so, you might get an exception:
Unhandled promise rejection TypeError: Response has unsupported MIME type
Packages like serve, which set the correct Content-Type for WebAssembly files and are easy to get running, can be used to avoid such errors.
You can install serve as a project dependency with npm or yarn, and then you can run it from the project folder:
npm install serve
# This will make the current directory contents available through `http://0.0.0.0:5000`.
npx serve
Workaround by disabling streaming instantiation
We highly recommend that you add support for the proper WebAssembly MIME type to your web server due to reasons outlined in this blog post. If you do not have the resources to do so, you can also disable streaming instantiation by adding the following option to the configuration object passed to PSPDFKit.load():
PSPDFKit.load({
disableWebAssemblyStreaming: true
// ... other options
});
Why Do I Have to Manually Copy Files from node_modules into My App?
PSPDFKit is bundler agnostic (for the same reasons it is framework agnostic). In fact, it can even be used without a bundler, and PSPDFKit’s assets can be referenced via link and script tags.
Additionally, we split our codebase into multiple files so that specific pieces are loaded lazily, i.e. only when they are used. If we were to provide a single file bundle, its size would be extremely large, and most of the time, this is unacceptable.
The main entry point, pspdfkit.js, is usually bundled automatically by tools. However, the pspdfkit-lib additional assets need to be copied manually since the host application is not aware of them being loaded lazily.
I18n: Cannot find translations for “en”. Please retry or add them manually to PSPDFKit.I18n.messages[“en”]
Translations and other assets like the CSS for PSPDFKit for Web are located in the pspdfkit-lib folder. When this folder is not copied to the same location of your application file that includes pspdfkit, then PSPDFKit for Web is not able to locate those assets. This is usually an issue with standalone, since the server is already preconfigured to serve those files correctly.
Please refer to our guide to find out how to copy the PSPDFKit for Web assets.
Building Angular for Production with Source Maps
When building your Angular application for production with source maps enabled, your build might hang for several minutes while building ./node_modules/pspdfkit/dist/pspdfkit.js.
To make your build fast again, disable Angular’s build optimizer. Setting the buildOptimizer option to false in the production settings of angular.json will do the trick:
{
"projects": {
"<my-project>": {
"architect": {
"build": {
"configurations": {
"production": {
- "buildOptimizer": true
+ "buildOptimizer": false
}
}
}
}
}
}
}
Angular App Not Working as Expected in Production
This might happen when Angular tries to optimize the already optimized PSPDFKit library. In order to fix this, we have to exclude PSPDFKit from Angular’s optimizer. This can be done by using PSPDFKit as a UMD module. To do this, make the following change in your angular.json file:
{
+ "scripts": ["./node_modules/pspdfkit/dist/pspdfkit.js"]
}
Now you can access PSPDFKit using window.PSPDFKit instead of importing it as a CommonJS/ES module.
Can I Open Local or Remote Files via URL?
Due to security concerns, web browsers do not allow fetch() and XMLHttpRequest APIs to access the local file system or other domains. Since we need those APIs in order to load required artifacts and PDF files, PSPDFKit for Web also requires a lightweight web server, as outlined in our standalone integration guides.
An example error for using fetch() with a file:// URL looks like this:
Fetch API cannot load file:///example.pdf. URL scheme must be "http" or "https" for CORS request.
A similar error might occur when trying to open a PDF document that is hosted on another domain. In order for PSPDFKit for Web to load such a file, the host server must set proper Cross-Origin Resource Sharing (CORS) headers.
If you don’t have control over the target server, you can use a local proxy to it to access the documents.
“Tainted Canvases May Not Be Exported” and “The Operation Is Insecure” Errors
You might see one of the following errors pop up during PSPDFKit’s initialization.
Google Chrome:
DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
Firefox/Safari:
SecurityError: The operation is insecure.
In such a scenario, it could be that you’re trying to load a cross-origin image from a PSPDFKit.Configuration#renderPageCallback definition. If that’s the case, please make sure to set the crossOrigin property of the HTMLImageElement instance to anonymous before setting its src:
const img = document.createElement("img"); img.crossOrigin = "anonymous"; img.src = "https://example.com/myimage.png"; PSPDFKit.load({ renderPageCallback(ctx, pageIndex, pageSize) { ctx.drawImage( img, (pageSize.width - size) / 2, (pageSize.height - size) / 2 ); } // ... });
“Content Security Policy: The page’s settings blocked the loading of a resource at inline” Errors
If you’re using Content Security Policies to secure your webpage, please make sure you’re using the following options to allow our WASM Web Worker to operate:
script-src 'self' 'unsafe-inline' 'unsafe-eval'; worker-src blob:;
If you require a stricter set of policies, it’s recommended you use PSPDFKit for Web Server-Backed, as it doesn’t use a WASM Web Worker.
IE 11 Issues
If you’re using IIS Server, make sure your server is configured to handle .mem files. In the case that the browser doesn’t support WebAssembly, we fall back to asm.js, and we provide a .mem file that our application loads during initialization. You can read more about how to allow this manually on the IIS website.
Internet Explorer 11 is no longer supported in our Web SDK as of version 2022.5.
Chunk Failing to Load
If your browser throws a “414 Request-URI Too Large” error or can’t load the chunk because of the wrong URL, please pass the baseUrl option in the configuration object.
Digital Signature Fails to Verify on PSPDFKit but Adobe Acrobat Is Able to Verify It Correctly
One possible reason for PSPDFKit not being able to correctly verify digital signatures on a document is if the required trusted root certificates aren’t loaded when initializing a PSPDFKit for Web instance.
The reason Adobe Acrobat is able to correctly verify the document on the host machine is because it has access to certificates installed on the host. Additionally, it ships with a built-in list of certificates known as the Adobe Approved Trust List (AATL).
Please refer to our How to Create Custom Certificate Sets guide to learn how to use your trusted root certificate files for digital signature validation on both Standalone and Server-backed deployments.
Reserved Size Is Not Enough to Contain the Signature
If, while signing a document, you receive an error in the console that says “Cannot add the container structure because the reserved size is not enough to contain the signature,” it means the certificate size is bigger than we expected. You can solve this by passing a custom placeholderSize while calling instance.signDocument. placeholderSize is used to override the default size that’s reserved for the signature container. You can read more about it in our Digital Signatures guide.
NetworkError When Attempting to Fetch Resource
Browsers sometimes throw an error when a fetch() call is interrupted. The specific error depends on the browser. Here are some examples of this error that we observed in various browsers:
-
Chrome —
TypeError: Failed to fetch -
Firefox —
TypeError: NetworkError when attempting to fetch resource -
Safari —
TypeError: cancelled
This can happen when the network is down or when a user clicks the stop loading button while the API request is in progress. This means that if you’re getting random reports with these errors, you can usually ignore them as they’re most likely the result of a usual workflow.
Keep in mind that these errors could also indicate a possible CORS error — “Failed to fetch” errors can also be generated in the case of failed fetch requests due to misconfigured CORS headers. You should investigate if you’re getting these errors without any known reason that could have led to canceling the fetch() calls.
Network error net::ERR_BLOCKED_BY_CLIENT
Unspecified network errors such as net::ERR_BLOCKED_BY_CLIENT can be thrown when the client blocks network requests. Possible culprits could be browser extensions such as AdBlock or Ghostery, or similar privacy tools. Another cause could be an antivirus or anti-spyware software running on a user’s device or a network proxy.
You can check if the browser extension is causing your issues by running in an incognito mode (but make sure to not have extensions enabled) or in another browser with no extensions installed. If the issue is caused by system- or network-wide antivirus/privacy software, you’ll need to find a way to disable it, or preferably, run it on a separate machine or a separate network.
Inaccurate Text Selection via UI
Our viewer renders PDF pages as images. When there’s text in the page, this text is rendered as part of the image, using the original font. To enable text selection, we then overlay the same text in HTML but make it transparent using CSS. The only problem with this approach is that the browser might not ship the original fonts in the PDF, in which case it’ll fall back to a generic font. In this case, manual text selection might be not be accurate. This is a known issue, and we’re exploring solutions to improve this behavior in the future.