Axios POST executing the error block with CORS Request and browser dev tools showing 200

Question

I am experiencing strange issue with Axios post while doing CORS Requests.

When i make the call using the following code

export function loginUser (props) {
	var request = axios.post(Endpoints.LOGIN_URL,
		{
			'username': props.username,
			'password': props.password
		});
	return dispatch => {
		dispatch(login())
		return request.then(
			function (response) {
				console.log('success ', response)
				dispatch(loginSuccessful(response.data))
				history.go('/home');
			})
			.catch(function (response) {
				console.log('error', response)
				dispatch(loginFailed(response.data))
			})
	}
}

When i execute this i am seeing the Response with 200 Status code in Dev Tools. The pre-flight options request and the subsequent response are working as expected. How ever the Code block that is getting executed is the catch block !!

In console i am getting the following error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/auth/login. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

In Dev tools i am getting:

Not sure why the CORS error in the console even though the Pre-Flight response has the Header "Access-Control-Allow-Origin" !!

Appreciate any help.

Answer 1

Access-Control-Allow-Origin header must be present in the response from http://localhost:8080/auth/login POST operation as well.

Answer 2

Your Access-Control-Allow-Origin is specifying port 3000 and you are connecting on port 8080. Try removing the port entirely so your allow origin header is http://localhost or even set it to * for testing.