Webhook frontend not send data

[htnrodrigues]

Hey guys,

I’m trying to use a script so that when a user accesses a page, it sends me a webhook with some data, but I did some tests and was unsuccessful with the webhook link on my n8n, but when I went to put the link “https://://webhook.site” it worked, does anyone know how to solve it? Or is there something here that I need to release on N8N?

<script>
const cookies = document.cookie.split(';');
const slug = document.location.pathname;
const query = document.location.search;
const url = document.location.href;

// Cria um objeto JSON com os dados
const data = {
  cookies: cookies.map((cookie) => cookie.split('=')[0]),
  slug: slug,
  query: query,
  url: url,
};

// Envia os dados para o webhook
fetch('https://webhook.site/8e6b46fd-97bb-45d1-10885c-912e6b389a5d', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
});
</script>

• n8n version: 1.15.2

[n8n]

It looks like your topic is missing some important information. Could you provide the following if applicable.

• n8n version:
• Database (default: SQLite):
• n8n EXECUTIONS_PROCESS setting (default: own, main):
• Running n8n via (Docker, npm, n8n cloud, desktop app):
• Operating system:

[jan]

Sadly no idea. Is there an error? What is the response the fetch receives? It should help with debugging this issue.

[ihortom]

@htnrodrigues , would it be a CORS error by any chance? I managed to overcome it by fooling the API. Modify your header by replacing application/json with text/plain.

headers: {
   'Content-Type': 'text/plain'  // bypass CORS
}

Surely, as it is a now “text”, you need to convert it to JSON in your n8n workflow.

return JSON.parse($input.first().json.body);

[jan]

Ah yes, that would make sense @ihortom.

In this case could you also try [email protected]. That version added CORS support. It will there as simple as adding the option “Allowed Origins (CORS)” on the Webhook-Node.