POST request blocked by CORS policy #151
Description
- ATM version: 0.2.2
Description
When trying to make a POST call to the REST API server from a browser the following error appears:
Access to XMLHttpRequest at 'http://127.0.0.1:5000/api/datasets' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
How to reproduce the error
Just make a POST request to ATM from a browser using a different host name and port than the one that has served the HTML.
The simplest way to achieve this is by creating a simple HTML file with some javascript code that attempts to make a POST to the ATM API Endpoint and then opening that HTML file in the browser.
$ atm start
Starting ATM
$ cat test_post.html
<html>
<body>
<input value="POST" type="button" onclick="post()">
</body>
<script>
function post() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://127.0.0.1:5000/api/datasets", true);
xhr.setRequestHeader("Content-Type", "application/json");
var data = JSON.stringify({
train_path: 'https://atm-data.s3.amazonaws.com/pollution_1.csv',
class_column: 'class'
});
xhr.send(data);
}
</script>
</html>
$ x-www-browser test_post.html
Opening in existing browser session.
Once the file is open in the browser, a POST button will show up.
Click on the POST button, and the error mention above will show in the browser console.