Something wrong when response with code 400 in axios

Question

I'm using Vue and Axios to build a SPA frontend. When server send a response with code 400 in CROS. Browser's console log:

(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)

How I send request:

api.request({
 url: '/api/token/',
  method: 'post',
  data: {
    email: '972372527@qq.com',
    password: 'aaaaaaaA'
  }
}).catch(err=>{console.log(err)})

Browser's network inspector shows 2 requests(OPTIONS and POST) has been sent. The both of them are working as expected.

How ever if server send a 20X response without any error catches. Everything is fine.

I try the same code in a new html file and only load axios's script file. Got the same errors.

Check if CORS is enabled (`Access-Control-Allow-Origin` is set to `*`) in the 400 error response. If you are using Laravel, I noticed the CORS headers are not being sent when an error occurs. — Ikbel, May 02 '18 at 11:48
The backend shouldn't respond with a 400 error code to an OPTION pre-flight request. — Emile Bergeron, May 02 '18 at 18:57
[Answer I wrote](https://stackoverflow.com/a/49886365/1218980) on a really similar question. — Emile Bergeron, May 02 '18 at 18:58

Alex · Answer 1 · 2018-05-03T15:48:50.913

0

You need set 'Access-Control-Allow-Origin': '*'

edited May 03 '18 at 15:48

answered May 02 '18 at 15:22

Alex

2,383
19
23

score 0 · Accepted Answer · answered May 20 '19 at 07:25

0

Preflight request shouldn't response 400 error.

answered May 20 '19 at 07:25

lei li

930
7
19

Something wrong when response with code 400 in axios

2 Answers2