for every product displayed in the page, there is dedicated HTTP request to fetch data from backend via restful API:

take 300938 for example:

I see two http requests which are exactly the same, one with HTTP OPTIONS and one with HTTP GET.

原因:

Preflighted requests

Unlike simple requests (discussed above), "preflighted" requests first send an HTTP OPTIONS request header to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this since they may have implications to user data. In particular, a request is preflighted if:

• It uses methods other than GET or POST. Also, if POST is used to send request data with a Content-Type other than application/x-www-form-urlencoded, multipart/form-data, or text/plain, e.g. if the POST request sends an XML payload to the server using application/xml or text/xml, then the request is preflighted.
• It sets custom headers in the request (e.g. the request uses a header such as X-PINGOTHER)

这个机制的必要性:Remember that by adding CORS, you're potentially accepting requests from anyone, in which they could manipulate data on your server through requests (POST, PUT, DELETE etc). In these situations, like when using custom headers, the browser is just checking with the server first that the server is willing to accept the request before sending it as sending unsolicited requests to the server could be really dangerous for your data, and also, what's the point in the browser sending potentially large payloads if the server isn't wanting to accept them, hence the pre-flight OPTIONS check.