Home>

We created a site that sends requests to the following APIs and placed them on AWS S3.

However, requests can be sent from the PC, but requests cannot be sent from iPhone chrome or safari.

When you capture iPhone communication with the tool, API requests are thrown, so JS processing seems to work.

If i know a solution, can you tell me?
Thank you.

<! DOCTYPE html>
<html lang = "en">
<head>
  <meta http-equiv = "content-type" charset = "utf-8">
  <title>Test</title>
  <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X + 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH + 8abtTE1Pi6jizo" crossorigin = "anonymous;gt&gt/script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV + 2 + 9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l849 = "anonymous"></script>
  <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3 + MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "&/ script>
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
  / **
   * id: Click the # ~ attribute to execute the corresponding function.
   * /
  $(function () {
    $('# exePost'). click (postFunc);
  });
    / * Processing when the [POST] button is pressed 1 * /
    function postFunc () {
      let url = 'https: // (your own API)/post';
      / * HTTP request * /
      let request = new XMLHttpRequest ();
      let body = {
        "val": "piyopiyo"
      };
      / * Request start * /
      request.open ('POST', url);
      / * HTTP header * /
      request.setRequestHeader ('Content-Type', "application/json;charset = utf-8");
      request.onreadystatechange = function () {
        if (request.status! = 200) {
            document.getElementById ("result1"). innerHTML = 'NG'
        } else {
            // successful acquisition
            document.getElementById ("result1"). innerHTML = 'OK';
        }
      };
      request.send (JSON.stringify (body));
    }
  </script>
</head>
<body>
  <div>
    <h1>test</h1>
    <div>
      <label>Parameters</label>
      <input type = "text" cols = "15" placeholder = "(example) hogehoge" /><br>
    </div>
    <br>
    <input type = "button" value = "request execution">
    <br>
    <div>
    </div>
  </div>
</body>
</html>
  • Answer # 1

    Self-solved.

    There is one error listed first, and the API of the request destination is a self-made API.

    So the cause was below.
    https://stackoverflow.com/questions/46454208/ios11-causing-cors-issues-in-all-mobile-browsers

    In iOS11, it seems that the request is played if you set the wildcard setting "Access-Control-Allow-Headers:"*"" in the API CORS settings.

    Solved by explicitly specifying the value of "Access-Control-Allow-Headers".

    Thank you so much for your thoughts.