Application Post request to a webhook

Questions
,
1

Describe the issue/error/question

Hello, I’m creating a Angular application and I need to make API calls with webhooks on n8n. When I make a call to a webhook, I have an error like “Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘localhost:8800’”
What I did until now ?
When I had this error the first time, I added the response header "Access-Control-Allow-Origin : * " to the webhook, and it worked but only for a webhook with the GET HTTP Method. But when I tried with a POST HTTP Method, I have the error again… So I don’t know what I can do…
(I hope I am understandable ^^ ask if you have any question :wink:)

What is the error message (if any)? (On the web browser)

Object { headers: {…}, status: 0, statusText: “Unknown Error”, url: “[link]”, ok: false, name: “HttpErrorResponse”, message: “Http failure response for [link]: 0 Unknown Error”, error: error }
error: error { target: XMLHttpRequest, isTrusted: true, lengthComputable: false, … }
headers: Object { normalizedNames: Map(0), lazyUpdate: null, headers: Map(0) }
message: “Http failure response for [link]: 0 Unknown Error”,
name: “HttpErrorResponse”,
ok: false,
status: 0,
statusText: “Unknown Error”,
url: “[link]”

Please share the workflow

Code of the call in Angular

this.httpClient.post<any>(environment.apiMCURLTest + '72b8d0b4-3777-4246-b1f3-7f2980169f09', {'pseudo':player}).subscribe(
          (response)=>{
            console.log(response)
          }
        )

Share the output returned by the last node

No output from the node. The webhook is not triggered.

Information on your n8n setup

  • n8n version: 0.182.1
  • Database you’re using (default: SQLite): SQLite
  • Running n8n with the execution process [own(default), main]: own ??
  • Running n8n via [Docker, npm, n8n.cloud, desktop app]: Docker
2

Hey @Quentinus, I am not familiar with httpClient, but I suspect it would cause your browser to send the OPTIONS preflight request described here which seems to be what fails here. You could verify this in the network console of your browser.

n8n would not handle these preflight requests, so you would need to configure a reverse proxy sitting in front of n8n accordingly. You could alternatively check if your web app can make a request with a text/plain content type instead as these would not be subject to CORS iirc.

3

Ah, that is weird that I need to make theses modifications for POST Request but not for GET Request, I will see what can I do ^^
Thank you :slight_smile:

1 Like
4

Actually, looking at today’s changelog it seems like an upgrade to 0.183.0 might fix the problem too. It includes an update to handle OPTIONS requests from any source:

So definitely worth trying out if you haven’t implemented anything else yet.

5

Ok I see, thank you, I just have to wait for the update to be available on my docker ^^

6

0.183.0 should be available on Docker Hub already, I updated my instance this morning when posting this :slight_smile:

7

It works now ^^ I waited a few hours and I had the update, I don’t know why I needed to wait for the update but it’s ok :blush: Thank you again for your help !

1 Like
8

Awesome, so glad to hear it’s working, thanks for confirming!

Quite a coincidence this feature has been released the day after you posted :smiley:

1 Like
10

I have the same issues, even in N8N Cloud the problem exists.

11

Hey @igcorreia, this is a rather old thread and I don’t have all details present anymore. Iirc you’d need to add the Access-Control-Allow-Headers header on the reverse proxy level (so outside of n8n) for this to work.

Depending on the application you are using you could also consider using a different content type to avoid CORS as suggested here.

1 Like
12

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.