My site is not working and it says it's because of a host error

[Nicholas2271]

I just bought a domain in namecheap. I followed all the steps and even deleted the A type DNS that my domain already had and changed it to 1.1.1.1 and tried my website and it gave Error 520. because of this I changed it back to the A type DNS it had as u can see in the picture below but it won't work either idk what the problem could be. when I add the "www." before my domain it actually appears something like the 3rd image. Idk what I'm doing wrong so someone please help me. It also appears this mismatch thing in the 4th image.

Here's the code I used in case of needed.
/* CONFIGURATION STARTS HERE */

/* Step 1: enter your domain name like fruitionsite.com */
const MY_DOMAIN = 'cattaleyaconfecciones.com';

/*

• Step 2: enter your URL slug to page ID mapping
• The key on the left is the slug (without the slash)
• The value on the right is the Notion page ID
  */
  const SLUG_TO_PAGE = {
  '': '42d0e49d4a9049cbbc52095cd406ddca',
  'catalogo': '7ba17268587040c88efbfc7abf1ac850',
  'contactanos': 'd4e9027902fd4743bdb467d90fcacb1b',
  'sobre-nosotros': 'f239ed72cd1c4419b32d19be6e45fd2b',
  'haz-tus-pedidos': 'cf12b739c2bb4555bc4378b61f249e12',
  };

/* Step 3: enter your page title and description for SEO purposes */
const PAGE_TITLE = '';
const PAGE_DESCRIPTION = '';

/* Step 4: enter a Google Font name, you can choose from https://fonts.google.com */
const GOOGLE_FONT = '';

/* Step 5: enter any custom scripts you'd like */
const CUSTOM_SCRIPT = ``;

/* CONFIGURATION ENDS HERE */

const PAGE_TO_SLUG = {};
const slugs = [];
const pages = [];
Object.keys(SLUG_TO_PAGE).forEach(slug => {
const page = SLUG_TO_PAGE[slug];
slugs.push(slug);
pages.push(page);
PAGE_TO_SLUG[page] = slug;
});

addEventListener('fetch', event => {
event.respondWith(fetchAndApply(event.request));
});

function generateSitemap() {
let sitemap = '';
slugs.forEach(
(slug) =>
(sitemap +=
'https://' + MY_DOMAIN + '/' + slug + '')
);
sitemap += '';
return sitemap;
}

const corsHeaders = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, HEAD, POST, PUT, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type',
};

function handleOptions(request) {
if (request.headers.get('Origin') !== null &&
request.headers.get('Access-Control-Request-Method') !== null &&
request.headers.get('Access-Control-Request-Headers') !== null) {
// Handle CORS pre-flight request.
return new Response(null, {
headers: corsHeaders
});
} else {
// Handle standard OPTIONS request.
return new Response(null, {
headers: {
'Allow': 'GET, HEAD, POST, PUT, OPTIONS',
}
});
}
}

async function fetchAndApply(request) {
if (request.method === 'OPTIONS') {
return handleOptions(request);
}
let url = new URL(request.url);
url.hostname = 'www.notion.so';
if (url.pathname === '/robots.txt') {
return new Response('Sitemap: https://' + MY_DOMAIN + '/sitemap.xml');
}
if (url.pathname === '/sitemap.xml') {
let response = new Response(generateSitemap());
response.headers.set('content-type', 'application/xml');
return response;
}
let response;
if (url.pathname.startsWith('/app') && url.pathname.endsWith('js')) {
response = await fetch(url.toString());
let body = await response.text();
response = new Response(body.replace(/www.notion.so/g, MY_DOMAIN).replace(/notion.so/g, MY_DOMAIN), response);
response.headers.set('Content-Type', 'application/x-javascript');
return response;
} else if ((url.pathname.startsWith('/api'))) {
// Forward API
response = await fetch(url.toString(), {
body: url.pathname.startsWith('/api/v3/getPublicPageData') ? null : request.body,
headers: {
'content-type': 'application/json;charset=UTF-8',
'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36'
},
method: 'POST',
});
response = new Response(response.body, response);
response.headers.set('Access-Control-Allow-Origin', '*');
return response;
} else if (slugs.indexOf(url.pathname.slice(1)) > -1) {
const pageId = SLUG_TO_PAGE[url.pathname.slice(1)];
return Response.redirect('https://' + MY_DOMAIN + '/' + pageId, 301);
} else {
response = await fetch(url.toString(), {
body: request.body,
headers: request.headers,
method: request.method,
});
response = new Response(response.body, response);
response.headers.delete('Content-Security-Policy');
response.headers.delete('X-Content-Security-Policy');
}

return appendJavascript(response, SLUG_TO_PAGE);

}

class MetaRewriter {
element(element) {
if (PAGE_TITLE !== '') {
if (element.getAttribute('property') === 'og:title'
|| element.getAttribute('name') === 'twitter:title') {
element.setAttribute('content', PAGE_TITLE);
}
if (element.tagName === 'title') {
element.setInnerContent(PAGE_TITLE);
}
}
if (PAGE_DESCRIPTION !== '') {
if (element.getAttribute('name') === 'description'
|| element.getAttribute('property') === 'og:description'
|| element.getAttribute('name') === 'twitter:description') {
element.setAttribute('content', PAGE_DESCRIPTION);
}
}
if (element.getAttribute('property') === 'og:url'
|| element.getAttribute('name') === 'twitter:url') {
element.setAttribute('content', MY_DOMAIN);
}
if (element.getAttribute('name') === 'apple-itunes-app') {
element.remove();
}
}
}

class HeadRewriter {
element(element) {
if (GOOGLE_FONT !== '') {
element.append(<link href="https://fonts.googleapis.com/css?family=${GOOGLE_FONT.replace(' ', '+')}:Regular,Bold,Italic&display=swap" rel="stylesheet"> <style>* { font-family: "${GOOGLE_FONT}" !important; }</style>, {
html: true
});
}
element.append(<style> div.notion-topbar > div > div:nth-child(3) { display: none !important; } div.notion-topbar > div > div:nth-child(4) { display: none !important; } div.notion-topbar > div > div:nth-child(5) { display: none !important; } div.notion-topbar > div > div:nth-child(6) { display: none !important; } div.notion-topbar-mobile > div:nth-child(3) { display: none !important; } div.notion-topbar-mobile > div:nth-child(4) { display: none !important; } div.notion-topbar > div > div:nth-child(1n).toggle-mode { display: block !important; } div.notion-topbar-mobile > div:nth-child(1n).toggle-mode { display: block !important; } </style>, {
html: true
})
}
}

class BodyRewriter {
constructor(SLUG_TO_PAGE) {
this.SLUG_TO_PAGE = SLUG_TO_PAGE;
}
element(element) {
element.append(<div style="display:none">Powered by <a href="http://fruitionsite.com">Fruition</a></div> <script> window.CONFIG.domainBaseUrl = 'https://${MY_DOMAIN}'; const SLUG_TO_PAGE = ${JSON.stringify(this.SLUG_TO_PAGE)}; const PAGE_TO_SLUG = {}; const slugs = []; const pages = []; const el = document.createElement('div'); let redirected = false; Object.keys(SLUG_TO_PAGE).forEach(slug => { const page = SLUG_TO_PAGE[slug]; slugs.push(slug); pages.push(page); PAGE_TO_SLUG[page] = slug; }); function getPage() { return location.pathname.slice(-32); } function getSlug() { return location.pathname.slice(1); } function updateSlug() { const slug = PAGE_TO_SLUG[getPage()]; if (slug != null) { history.replaceState(history.state, '', '/' + slug); } } function onDark() { el.innerHTML = '<div title="Change to Light Mode" style="margin-left: auto; margin-right: 14px; min-width: 0px;"><div role="button" tabindex="0" style="user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; border-radius: 44px;"><div style="display: flex; flex-shrink: 0; height: 14px; width: 26px; border-radius: 44px; padding: 2px; box-sizing: content-box; background: rgb(46, 170, 220); transition: background 200ms ease 0s, box-shadow 200ms ease 0s;"><div style="width: 14px; height: 14px; border-radius: 44px; background: white; transition: transform 200ms ease-out 0s, background 200ms ease-out 0s; transform: translateX(12px) translateY(0px);"></div></div></div></div>'; document.body.classList.add('dark'); __console.environment.ThemeStore.setState({ mode: 'dark' }); }; function onLight() { el.innerHTML = '<div title="Change to Dark Mode" style="margin-left: auto; margin-right: 14px; min-width: 0px;"><div role="button" tabindex="0" style="user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; border-radius: 44px;"><div style="display: flex; flex-shrink: 0; height: 14px; width: 26px; border-radius: 44px; padding: 2px; box-sizing: content-box; background: rgba(135, 131, 120, 0.3); transition: background 200ms ease 0s, box-shadow 200ms ease 0s;"><div style="width: 14px; height: 14px; border-radius: 44px; background: white; transition: transform 200ms ease-out 0s, background 200ms ease-out 0s; transform: translateX(0px) translateY(0px);"></div></div></div></div>'; document.body.classList.remove('dark'); __console.environment.ThemeStore.setState({ mode: 'light' }); } function toggle() { if (document.body.classList.contains('dark')) { onLight(); } else { onDark(); } } function addDarkModeButton(device) { const nav = device === 'web' ? document.querySelector('.notion-topbar').firstChild : document.querySelector('.notion-topbar-mobile'); el.className = 'toggle-mode'; el.addEventListener('click', toggle); nav.appendChild(el); onLight(); } const observer = new MutationObserver(function() { if (redirected) return; const nav = document.querySelector('.notion-topbar'); const mobileNav = document.querySelector('.notion-topbar-mobile'); if (nav && nav.firstChild && nav.firstChild.firstChild || mobileNav && mobileNav.firstChild) { redirected = true; updateSlug(); addDarkModeButton(nav ? 'web' : 'mobile'); const onpopstate = window.onpopstate; window.onpopstate = function() { if (slugs.includes(getSlug())) { const page = SLUG_TO_PAGE[getSlug()]; if (page) { history.replaceState(history.state, 'bypass', '/' + page); } } onpopstate.apply(this, [].slice.call(arguments)); updateSlug(); }; } }); observer.observe(document.querySelector('#notion-app'), { childList: true, subtree: true, }); const replaceState = window.history.replaceState; window.history.replaceState = function(state) { if (arguments[1] !== 'bypass' && slugs.includes(getSlug())) return; return replaceState.apply(window.history, arguments); }; const pushState = window.history.pushState; window.history.pushState = function(state) { const dest = new URL(location.protocol + location.host + arguments[2]); const id = dest.pathname.slice(-32); if (pages.includes(id)) { arguments[2] = '/' + PAGE_TO_SLUG[id]; } return pushState.apply(window.history, arguments); }; const open = window.XMLHttpRequest.prototype.open; window.XMLHttpRequest.prototype.open = function() { arguments[1] = arguments[1].replace('${MY_DOMAIN}', 'www.notion.so'); return open.apply(this, [].slice.call(arguments)); }; </script>${CUSTOM_SCRIPT}, {
html: true
});
}
}

async function appendJavascript(res, SLUG_TO_PAGE) {
return new HTMLRewriter()
.on('title', new MetaRewriter())
.on('meta', new MetaRewriter())
.on('head', new HeadRewriter())
.on('body', new BodyRewriter(SLUG_TO_PAGE))
.transform(res);
}

[fxbite]

You got error "Mismatch between origin and baseUrl (
dev)"
Fix: Change this line in your code window.CONFIG.domainBaseUrl = 'https://${MY_DOMAIN}'; to window.CONFIG.domainBaseUrl = location.origin;

See how they fix "Mismatch between origin and baseUrl (
dev)" in here #140

In DNS
Just add A record @ point to 1.1.1.1 (do not turn on proxy cloudflare in proxy status column)

[Nicholas2271]

do I delete the one I already have in the DNS?

[Nicholas2271]

I changed what u told me in the DNS and removed the other one

but it shows this

[fxbite]

delete the CNAME record and try again

[Nicholas2271]

I did and now it appears this

[fxbite]

Check your worker is working well

[Nicholas2271]

the worker is going amazing but when I use it on my browser even in incognito mode it won't load

[fxbite]

In this
Did you setup the route like this?
your_domain.com/*

[fxbite]

In my case, I also disable subdomain like this in workers and just on for my domain

[Nicholas2271]

like this?

[fxbite]

Yeah. That's it

[Nicholas2271]

it still won't work
it says that the site can't be reached, I also disabled the other one.

[fxbite]

Try clear cache "Purge cache"

[Nicholas2271]

it still won't work

[fxbite]

[Nicholas2271]

it works for u?

[fxbite]

yeah
maybe you have to clear cache in your browser

[Nicholas2271]

it doesn't show on my phone
I'm confused

[fxbite]

So weird =)))
I checked your website in my laptop and my phone
It's working well

[Nicholas2271]

omg is it too much to ask if u send a pic of the website in ur phone?

[fxbite]

If your phone can't update the notion app latest version in appstore or ch play. You can't see your website in your phone

[fxbite]

I recommend you check your website on laptop
On mobile is 50 - 50

[Nicholas2271]

I've checked in another browser but it won't appear

[Nicholas2271]

I do not comprehend why won't it show up to me

[fxbite]

In browser, does it show error?

[Nicholas2271]

yes it does, I've tried in 3 but this is what it shows

[fxbite]

do not add www
just type cattaleyaconfecciones.com

[fxbite]

because you just point cattaleyaconfecciones.com
Your DNS does not have record to www

[Nicholas2271]

it seems my browser adds automatically the www

[fxbite]

just test first

[fxbite]

[fxbite]

Did you add like this?

[Nicholas2271]

here

[Nicholas2271]

this?

[fxbite]

yup
try purge cache again
I can't see your website currently

[Nicholas2271]

oh ok

[fxbite]

Did it work?

[Nicholas2271]

done purging and nothing happened

[fxbite]

I saw your website. It's working well
Can you take the photo showing your link website in search address?
Like this

[Nicholas2271]

[fxbite]

uhmm seem like your website has been blocked by internet provider.

[Nicholas2271]

woah what

[Nicholas2271]

how to unblock it

[fxbite]

It like you can not enter a website because it's blocked

In my case, I can not enter this website in my country.

[fxbite]

you have to use VPN

[Nicholas2271]

no way
but I made the website for my country specifically

[Nicholas2271]

it worked with a vpn

[fxbite]

you can search "website refused to connect" to fix your issue.
There are many ways to fix
Good luck

[Nicholas2271]

on google or in here?

[fxbite]

google

[fxbite]

you can go to my website to check "Refused to connect"
my website fxbite.tk or www.fxbite.tk

[Nicholas2271]

ok I will

[Nicholas2271]

I checked ur website and it works for me why would mine get blocked

[fxbite]

why what

[Nicholas2271]

I really don't understand

[Nicholas2271]

it works on my phone and laptop using VPN but if I don't it won't load

[Nicholas2271]

nvm ur website worked bc of the VPN I turned it off and it stopped working

[fxbite]

Ok =))))

[Nicholas2271]

tysm for ur help but ig I will just not create the website

[fxbite]

You're welcome
Good luck to you