HTTP POST request with JSON payload from react app returns net::ERR_SSL_PROTOCOL_ERROR(chrome)

user_3723762 0
Viewed 11635

I have a react app that makes API call to the endpoint http://localhost:3020/schema/filter. Following is the payload that I am passing with the POST request.

let filterParams = {
            "filter": {
                "and": [{
                    "field": "name",
                    "operator": "LIKE",
                    "value": "Core"
                }, {
                    "field": "created_at",
                    "operator": "GREATER_THAN",
                    "value": "05/26/2017"
                }, {
                    "field": "created_at",
                    "operator": "LESS_THAN",
                    "value": "07/02/2017"
                }]
            }
        }

let response = await apiService.post('https://localhost:3020/schema/filter', filterParams)

API SERVER is rails app with puma server. Server console responds with

2017-07-04 12:04:05 +0545: HTTP parse error, malformed request (): #<Puma::HttpParserError: Invalid HTTP format, parsing fails.

API SERVER is configured to respond to the JSON payload. Whenever I try to POST request with the payload , the browser responds with

OPTIONS https://localhost:3020/schema/filter net::ERR_SSL_PROTOCOL_ERROR in the browser console in chrome.

Similarly, safari console returns

Fetch API cannot load https://localhost:3020/schema/filter. An SSL error has occurred and a secure connection to the server cannot be made.

Seems like I am having trouble with SSL or certificates. I tried deleting browser caches, cookies and certificate itself. Still no luck.

Any help is appreciated.

puma reactjs google-chrome ssl ruby-on-rails
1 Answers

This is an error because your service is posting to https://localhost but your rails server is MOST LIKELY not running with https.

If your react app, you should do something like:

var apiBase = process.env === 'PRODUCTION' ? 
    'https://www.productionapp.com/' : 'http://localhost:3000/'

let response = await apiService.post(apiBase + '/schema/filter', filterParams)
user_15363090
Related