Currently, I am utilizing Vue along with Axios to construct a single page application frontend. In situations where the server responds with a 400 error in CROS, the browser's console displays the following:
(2) POST http://dev.sportx.one/api/token/ 400 (Bad Request) **This line logged twice**
Failed to load http://dev.sportx.one/api/token/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 400.
Error: Network Error
at e.exports (spread.js:25)
at XMLHttpRequest.l.onerror (spread.js:25)
The request is being sent like this:
api.request({
url: '/api/token/',
method: 'post',
data: {
email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a49d9396979396919693e4d5d58ac7cbc9">[email protected]</a>',
password: 'aaaaaaaA'
}
}).catch(err=>{console.log(err)})
Upon checking the browser's network inspector, it shows that 2 requests (OPTIONS and POST) have been successfully executed as intended.
If the server responds with a 20X status without any errors caught, everything runs smoothly. However, when testing the same code on a new HTML file with only Axios script loaded, the same errors persist.