Getting JSON from the Arduino server. Problems with CORS

Question

I have an Arduino server that runs on IP 192.168.0.177. If you go to this address, it returns data in JSON format. For example, in a React application, I get this JSON something like this:

const [data, setData] = useState([])
axios.get('http://192.168.0.177')
  .then((res) => setData(res.data))
  .catch((err) => console.log(err))

In the Arduino sketch itself part of the code is like this:

client.println("HTTP/1.1 200 OK");
client.println("Access-Control-Allow-Origin: *");
client.println("Access-Control-Allow-Methods: GET");
client.println("Content-Type: application/json");
client.println("Connection: close");
client.println();

client.println("[");
client.println("{ \"id\": 1, \"name\": \"John\" }, ");
client.println("{ \"id\": 2, \"name\": \"Paul\" } ");
client.println("]");

If you run the React app on a local network, everything works fine. Localhost has http, not https, and it sends a request to the http server, so everything works.

The problem already appeared when I launched my React app on the global network. In other words, the address is something like this: https://app.com. Now if I send a request to the Arduino via https, the console writes an error that you can't send a request from https to http. Then I changed the query in the React code, or rather added only the 's'symbol:

axios.get('https://192.168.0.177')
               ^

Then there was another problem related to CORS. The console displays this error:

Request from an external source is blocked: the single source Policy prohibits reading a remote resource on https://192.168.0.177/. (Reason: the CORS request failed).

I read all about CORS and everywhere they write that you need to add the header "Access-Control-Allow-Origin: *"to the server. But it was in my Arduino code all the time.

I'm sorry, I'm not very good at this, so I'm asking for help. Where did I make a mistake?

What kind of Arduino hardware are you using? What kind of server software? What do you see, when you open https:// 192.168.0.177 in your browser directly? — wschopohl, Jul 16 '20 at 11:57
@wschopohl, i'm using Arduino UNO with ethernet module W5500. When I open this ip address in the browser, I see json data: `[ { "name": "john" }, { "name": "paul" } ]` — legloc, Jul 16 '20 at 12:03
Sorry to bring you the "bad" news. I expanded my answer to include three solutions to your problem. Good luck for your project! — wschopohl, Jul 16 '20 at 12:21

wschopohl · Accepted Answer · 2020-07-16T12:20:34.627

As far as I understand if you don't have the "W5500 Ethernet Shield S", which is a security enhanced version, you will not be able to deliver proper https secured website answers.

And because of the new security rules, that every modern browser enforces this will be a problem.

If you only need this in a develop environment, you could use special startup flags for your browser, to make it ignore those limitations. Or something like this for Chrome for example: How to get Chrome to allow mixed content?

If you need this in production environment you could put a proxy server in between, that calls http on the arduino and forwards the request over https. Such a server could be build with a raspberry pi.

But then again you could probably build the whole appliance just with a raspberry. That would probably even be cheaper then the Arduino plus W5500 shield and give you way more options. I personally build everything that needs network with raspberries theses days, because it gives me way more options.

Getting JSON from the Arduino server. Problems with CORS

1 Answers1