React请求本地Golang服务报Network Error，提示ssl_error_rx_record_too_long

首先咱们先揪出最核心的问题：Firefox里的ssl_error_rx_record_too_long错误，本质是你用HTTPS协议请求了一个只提供HTTP服务的端口。

你说curl能成功获取数据，大概率是你curl的时候用的是http://localhost:8080/data，但你的React代码里写的是https://localhost:8080/data——浏览器试图用HTTPS去连一个纯HTTP的Golang服务，这就相当于用错了沟通语言，自然会报错。你设置rejectUnauthorized: false根本没用，因为根本不存在SSL证书验证的问题，是协议本身不匹配。

快速解决步骤 #

• 第一步：修正React请求地址
  把Axios里的请求URL从https://localhost:8080/data改成http://localhost:8080/data，直接用HTTP协议请求。

• 如果确实需要HTTPS服务
  那你得给Golang服务配置SSL证书，把启动代码从http.ListenAndServe(":8080", nil)改成http.ListenAndServeTLS(":8080", "cert.pem", "key.pem", nil)，这里需要你自己生成SSL证书（可以用openssl自签测试用证书）。

顺便帮你揪出代码里的小坑 #

你的React代码里，dispatch(fetchDataSuccess(response.json));这里有问题——Axios已经自动把响应体解析成JSON了，你应该用response.data而不是response.json（response.json是fetch API里的方法，Axios里不存在这个属性）。修正后的这部分代码应该是：

.then((response) =>{
  dispatch(fetchDataSuccess(response.data));
  console.log(response);
})

再确认CORS配置 #

你服务端设置的AllowedOrigins: []string{"http://localhost:3000"}是对的，只要协议改对，CORS应该就能正常工作了。

内容的提问来源于stack exchange，提问作者Dorra Hadrich