Най-вероятно проблемът, с който се сблъсквате, не е поради вашия код, а поради някаква услуга на Cloudflare, която променя вашия код, за да защити вашия код! 😅

да! Върви се в пълен кръг (затова изображението)!

В крайна сметка грешките са там, за да ви защитят! 😂

Нека засенча малко светлина...

Имам уеб приложение Next.js, хоствано на Cloudflare — за по-лесно нека го наречем example.com, а домейнът на страниците му в Cloudflare да бъде example.pages.dev

Сега на фона, имам параграф на началната страница, който включва моя имейл адрес. Нещо връзка в кодовия фрагмент по-долу 👇

<p>Contact us at [email protected]</p>

Това е добре и няма проблем! Работи добре на локални машини, на страници за визуализация и дори на example.pages.dev Грешките започват, когато посетим нашия персонализиран домейн example.com👇

Въпреки това, позволете ми да поясня за мен, че това не беше голям проблем, защото няма ефект върху моите потребители! Но има възможност подобен проблем да окаже влияние върху вас – просто казвам 🥲

Връщам се към въпроса! И трите грешки бяха:

Бях напълно объркан защо това се случва на първо място и само на персонализирания домейн, прекарах часове, за да го разбера, тъй като не ми харесваше. Мразя грешки в конзолата!

Проверих целия код и дори опитах няколко неща! Преструктуриран малко, за да разбера проблема! Без късмет. (Как е възможно проблемът да не е там)

решението…

Тогава реших да отида в старата школа! Нещо, което правя, когато не намеря решението. 😶

Сега реших да сравня действително изобразените страници!

  • Отворено example.com в един раздел и example.pages.dev в друг
  • Щракна с десния бутон върху тях и двете и щракнете върху View Page Source
  • Копирах ги и двете и ги разкрасих за четливост 🥲
  • И след това diff ги провери с помощта на https://www.diffchecker.com/

И това е единствената разлика, която открих 👇

Сега беше ясно! Cloudflare защитаваше имейл адреса, но защо? 😅

Оказа се, че има активирана услуга, наречена Закриване на имейл адреси.



Какво е прикриване на имейл адрес? · Документи за поддръжка на Cloudflare
Имейл харвестъри и други ботове бродят из интернет, търсейки имейл адреси, които да добавят към списъци, насочени към получатели…developers.cloudflare.com



Това, което всъщност прави, е, че не позволява на ботовете да изтриват имейл адреси от вашите уебсайтове, като премахва имейла от текста на страницата и след това рендерира DOM елемента с помощта на Javascript, попълвайки отново имейл адреса - което причиняваше проблема за React тъй като първоначалното текстово съдържание не съответстваше на изобразения от сървъра HTML.

Бинго! Открихме проблема 😅

И за да го разрешите, или го игнорирайте, или накарайте Cloudflare да спре да го замъглява:

  • Добавете следния коментар в HTML кода на страницата: <!--email_off-->`_your_email addresses go here_`<!--/email_off-->
  • Върнете имейл адреси във формат JSON за AJAX повиквания, като се уверите, че вашият уеб сървър връща тип съдържание application/json.
  • Деактивирайте функцията за прикриване на имейл, като създадете Правило за конфигуриране или Правило за страница, което да се приложи към конкретна крайна точка.

Сега знаете как да решите проблема.

Заключение

Сега, какво научих от инцидента е, че винаги първо търсете постпроцесорите! Те могат да бъдат причина за вашите проблеми и ще ви спестят много време.

И ако използвате Cloudflare, има много и много от тях! Благодарим ти, Cloudflare, че си толкова полезен! 😂

Ако това е било полезно, документирам много такива научени неща и опит в Twitter, можете да ме следвате там!

Благодаря за четенето! Наслади се на деня си! 😉