CORS issue posting domain A to domain B

Question

I am getting a CORS issue only on axios.

In this html page, I am using a traditional form to post from domain A to domain B.

The form submit works correctly. The ajax post request works correctly. The axios post returns me to a CORS .

Access to XMLHttpRequest at 'https://domainB/post.php' from origin 'http://domain A.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

<html>
<head>
    <title>Registration Form</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://npmcdn.com/axios/dist/axios.min.js"></script>
<body>

    <h2>Registration Form</h2>

    <form action="https://domainB.com/post.php" method="POST">

        Last name:

        <input type="text" name="username"> 

        <input type="hidden" name="form_submitted" value="1" />

        <input type="submit" value="Submit">

    </form>

    <script>
        $(document).ready(function(){
    $.post("https://domainB.com/post.php",
    {
      username: "Donald Duck",
      city: "Duckburg"
    },
    function(data,status){
      alert("Data: " + data + "\nStatus: " + status);
    });
});
    </script>
    <script>

(function() {

axios.post('https://domainB.com/post.php', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });


})();

</script>
</body>
</html>

my post.php

<?php
echo 'post working';
var_dump( $_POST);
 $_POST['username'];
?>

score 0 · Answer 1 · answered May 18 '19 at 04:12

CORS is controlled by backend.

Browser prevents your code from accessing the response because the browser can't see Access-Control-Allow-Origin in response.

With CORS a preflight request is made to the server to see if the request is allowed. You will need to have your server respond to requests that have OPTIONS as request method by setting the header Acces-Control-Allow-Origin: * which will allow requests from any origin. Alternatively, you can allow for just certain origins Acces-Control-Allow-Origin: http://example.com.

Things can still get working by making the request through a Proxy can where a proxy sends appropriate CORS header on behalf of your request.

const proxy = "https://cors-anywhere.herokuapp.com/";
const url = "https://domainB.com/post.php"; 
fetch(proxy + url)
  .then(response => response.text())
  .then(contents => console.log(contents))
  .catch(() => console.log("CORS Error" + url ))

Making a request through a proxy will work this way

CORS proxy will forward your request to https://domainB.com/post.php
The return response from https://domainB.com/post.php with Access-Control-Allow-Origin headers.
Now your browser can see Access-Control-Allow-Origin headers present in the response header.

For more detail explanation you can check out this

https://stackoverflow.com/a/43881141/2850383

score 0 · Accepted Answer · answered May 28 '19 at 01:37

0

There was a configuration with the server. I did not do anything on my side and insisted with hosting company. They were able to fix it.

answered May 28 '19 at 01:37

mushood badulla

1,043
1
12
19

CORS issue posting domain A to domain B

2 Answers2