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

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 
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?
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 GARNER 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

What’s New for Talend Summer ’19

Watch the recorded webinar!

Watch Now

An API-First Approach to Modernizing Applications

Learn how to use an API-First Approach to Modernize your Applications

Watch 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