REST interface (POST) and CORS

Highlighted
Seven Stars

REST interface (POST) and CORS

Hello,
I have implement different REST interfaces. One interface for receiving data from a database. For that I use following schema:

Under tRestResponse I set Access-Control-Allow-Origin = *. That works fine. 
One interface I use for post data into in db. I use following schema:


Also under tRESTResponse I set Access-Control-Allow-Origin = *. But that not works. Under angularJS I also activate $http.defaults.headers.common = '*'; But in chrome/firefox I receive that error: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.

Greets Benjamin

Highlighted
Employee

Re: REST interface (POST) and CORS

If a 1st service uses GET then it means it is a 'simple' CORS request.
If you have POST/PUT/DELETE then a browser will do a so-called preflight request first. You can add an OPTIONS flow handler to manage it. FYI a TESB JIRA exists to make this process smoother for the job designers 
Highlighted
Seven Stars

Re: REST interface (POST) and CORS

So I add OPTIONS flow for the same URI to an trestresponse and add "Access-Control-Allow-Methods" right?
Highlighted
Employee

Re: REST interface (POST) and CORS

Yes please, add OPTIONS flow handler to tRESTRequest's URL Handler which will listen on the same URL where POST data will be sent to from a browser - the browser should issue a pre-flight OPTIONS request first - you may need to add few more headers to make it this pre-flight pass, see
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
which is one of the best articles.
HTH, Sergey
Two Stars

Re: REST interface (POST) and CORS

Hello, I had the same CORS issue when calling a Talend ESB REST Web Service, I solved it this way.WS Tuto 00.PNG
The Angular App running at http://localhost:4200 sends POST request that it preceded by a preflight OPTIONS request.

 

We have to configure in the tRESTRequest both HTTP verbs output flows namely POST and OPTIONS with the same URL (http://192.168.202.190:8090/sayHello/{name}).WS Tuto 01.PNG 
  • Headers to add in the "Component/Advanced Settings" tab of tRESTResponse for tRESTRequest OPTIONS Output Flow :
"Access-Control-Allow-Origin" : "*"
"Access-Control-Allow-Methods" : "OPTIONS"
"Access-Control-Allow-Headers" : "Access-Control-Allow-Origin, Accept, Content-Type"WS Tuto 02.PNG

 

  • Headers to add in the "Component/Advanced Settings" tab of tRESTResponse for tRESTRequest POST Output Flow :
"Access-Control-Allow-Origin" : "*"
"Access-Control-Allow-Methods" : "POST"
"Access-Control-Allow-Headers" : "Content-Type"

WS Tuto 03.PNG

 

  • Headers to add in the options of the Angular 6 POST Method :
'Content-Type': 'application/json'
'Accept': 'application/json'
'Access-Control-Allow-Origin': '*'

WS Tuto 04.PNG

 
That's All you have to do to make it work fine !!!
It's possible you get a CORB warning.

 

 

2019 GARTNER MAGIC QUADRANT FOR DATA INTEGRATION TOOL

Talend named a Leader.

Get your copy

OPEN STUDIO FOR DATA INTEGRATION

Kickstart your first data integration and ETL projects.

Download now

Talend API Designer – Technical Overview

Take a look at this technical overview video of Talend API Designer

Watch Now

Getting Started with APIs

Find out how to get started with APIs

Read