React axios CORS issue

Question

I am sending CORS request as follows:

const axiosConfig = {
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        //'crossdomain' : true
        // 'Access-Control-Allow-Origin': '*'
    }
};

let netAddress=https://some port/
axios.post(netAddress, obj, axiosConfig)

where obj is the data object.

Also, i am running npm start as below for React app

set HTTPS=TRUE&&npm start

The headers accepted by the server are as follows:

Access-Control-Allow-Headers:Content-Type
Access-Control-Allow-methods:GET , POST , PUT, PATCH ,DELETE
Access-Control-Allow-Origin:*
Access-Control-Expose-Headers:x-paging-pageno,x-paging-pagesize,x-paging-totalpage,
x-pagingtotalrecordcount

I am getting error as follows:

Access to XMLHttpRequest at 'https://10.6.0.7:9022/api/event/Event' from origin 'https://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

My localhost as well as server are running on HTTPS. I have tried crossdomain and Access-Control-Allow-Origin, but its not working still Also, GET requests to the same server is successfull, but POST fails And, I tried with chrome extensions like CORS unblock, but its failing Please help

Grant Singleton Grant Singleton · Accepted Answer · 2020-05-27T04:33:10

This may not be the answer you are looking for but I had this issue recently trying to POST to an endpoint from my client and was not able to due to CORS. It was a browser issue, not an issue with what the server accepted. You can get this to work by writing a cloud function which does the POST to your endpoint and then call that cloud function from your client. Be aware that you cant make http requests in cloud functions without at least the Blaze plan. Again, sorry if this doesnt help but thought I would share.

React axios CORS issue

1 Answers