来自 React 应用程序的带有 JSON 负载的 HTTP POST 请求返回 net::ERR_SSL_PROTOCOL_ERROR(chrome)

Question

我有一个 React 应用程序，可以对端点 http://localhost:3020/schema/filter 进行 API 调用。以下是我通过 POST 请求传递的有效负载。

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 是带有 puma 服务器的 Rails 应用程序。服务器控制台响应

2017-07-04 12:04:05 +0545: HTTP 解析错误，格式错误的请求 (): #<Puma::HttpParserError: HTTP 格式无效，解析失败。

API SERVER 配置为响应 JSON 有效负载。每当我尝试使用有效负载 POST 请求时，浏览器都会响应

OPTIONS https://localhost:3020/schema/filter net::ERR_SSL_PROTOCOL_ERROR在 chrome 浏览器控制台中。

同样，Safari控制台返回

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

我似乎在 SSL 或证书方面遇到了问题。我尝试删除浏览器缓存、cookie 和证书本身。还是没有运气。

任何帮助表示赞赏。

Answer 1

这是一个错误，因为您的服务正在发布，https://localhost但您的 Rails 服务器很可能没有使用 https 运行。

如果您的反应应用程序，您应该执行以下操作：

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

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