-2

While fetching API from axios I get the following errors

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://...bla bla.... (Reason: CORS preflight response did not succeed)

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://...bla bla..... (Reason: CORS request did not succeed)

I think the second error is because of first error. The main thing here is to fix first error.

actions.js

export const getMetadata = srNumber => {
    return (dispatch) => {
        dispatch(getMetadataRequest())
        axios.get(`${BASE_URL}/some path/${srNumber}`, {
            headers: {
                'X-JWT-Assertion': ASSERTION,
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Methods': '*',
                'Access-Control-Allow-Credentials': 'true',
                'Access-Control-Allow-Headers': 'Content-Type, Authorization'
            }
        })
            .then(response => {
                const data = response.data
                console.log("GET METADATA", data)
                dispatch(getMetedataSuccess(data))
            })
            .catch(error => {
                const errorMessage = error.message
                console.error("GET METADATA", errorMessage)
                dispatch(getMetadataFailure(errorMessage))
            })
    }
}
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
deluxan
  • 372
  • 1
  • 5
  • 22
  • 2
    Your server at https:// ....bla should allow the host:port combination of your application to allow requests. Refer this https://enable-cors.org/server.html – chandan_kr_jha May 19 '20 at 14:16
  • I have three api fetch for the same server. Two of them working. This alone is not working – deluxan May 19 '20 at 14:17
  • 1
    The cors as to be enabled in the server side, not client.... – BENARD Patrick May 19 '20 at 14:18
  • 1
    refer this for better understanding https://www.html5rocks.com/en/tutorials/cors/#toc-cors-server-flowchart – Rohit Singh May 19 '20 at 14:19
  • @deluxan There might be some change in the response of the api which is failing. Can you recheck again. – chandan_kr_jha May 19 '20 at 14:20
  • @chandan_kr_jha I've checked several times. Works fine for other paths. But not for this. Also works fine from swagger – deluxan May 19 '20 at 14:30
  • @RohitSingh As per the flow chart my headers are correct. Can you please identify the mistake in the header which I'm not focusing – deluxan May 19 '20 at 14:32
  • I get `access-control-allow-origin: * ` as Response header when I try this api from swagger. And I gets 200 ok – deluxan May 19 '20 at 14:40
  • Does this answer your question? [XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header](https://stackoverflow.com/questions/35553500/xmlhttprequest-cannot-load-xxx-no-access-control-allow-origin-header) – Quentin May 19 '20 at 16:35
  • @deluxan — It's error on the preflight request, not the actual request – Quentin May 19 '20 at 16:35

1 Answers1

-2

Try this:

const options = {
  method: 'GET',
  headers: {
               // add header which is required for the call, please dont add response headers 
           }
   url: `${BASE_URL}/some path/${srNumber}`,
};

export const getMetadata = srNumber => {
    return (dispatch) => {
        dispatch(getMetadataRequest())
        axios(options)
            .then(response => {
                const data = response.data
                console.log("GET METADATA", data)
                dispatch(getMetedataSuccess(data))
            })
            .catch(error => {
                const errorMessage = error.message
                console.error("GET METADATA", errorMessage)
                dispatch(getMetadataFailure(errorMessage))
            })
    }
}
Rohit Singh
  • 80
  • 5