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

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 ():

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.

ruby-on-railsgoogle-chromereactjssslpuma


Solution 1:[1]

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)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Blair Anderson

Related Questions