I have set the headers then also CORS policy error is there(ReactJS)

Question

axios.get("https://url.example.com/b/478L", {
        headers: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json',
        }
    }).then((response) => console.log(response.data))
        .catch((error) => console.log(error))

My URL is different.

Error:

Access to XMLHttpRequest at 'https://url.example.com/b/478L' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Look this question https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe — Shihara Dilshan, Dec 01 '20 at 11:54

score 1 · Answer 1 · answered Dec 01 '20 at 11:47

1

I don't know how server is built. But every back-end frameworks have functionality to handle CORS. For example, in ExpressJS, you can use cors middleware to handle CORS policy. So try to solve that problem on Server Side.

answered Dec 01 '20 at 11:47

devastro

79
3

Backend is not in my control. Its a url of jsonkeeper – Prem Jogi Dec 01 '20 at 11:50
Is there any other solution? – Prem Jogi Dec 01 '20 at 11:54
@Prem Jogi Please try to set Access-Control-Allow-Credentials header. – devastro Dec 01 '20 at 12:00

Shihara Dilshan · Answer 2 · 2020-12-01T12:12:59.473

0

If you have your own back end you can solve this problem. For an example in Node/Express back end you can use cors library npm link here

Then in your app.js add this line,

//IMPORT THE LIBRARY
const cors = require('cors');


//ALLOW REQUEST FROM ANY DOMAIN
app.use(cors());

Will fix the error.

If are keep getting this error try different end-point. Or may be you find some thing useful here

edited Dec 01 '20 at 12:12

answered Dec 01 '20 at 11:44

Shihara Dilshan

193
2
14

I have set the headers then also CORS policy error is there(ReactJS)

2 Answers2