{"id":723,"hash":"21c4259a782e3d68b5d7acfe356bfaa11c6e872dd8f3678d635199db6cfa30c0","pattern":"Access Control Origin Header error using Axios","full_message":"I'm making an API call using Axios in a React Web app. However, I'm getting this error in Chrome:\n\nXMLHttpRequest cannot load\nhttps://example.restdb.io/rest/mock-data. No\n'Access-Control-Allow-Origin' header is present on the requested\nresource. Origin 'http://localhost:8080' is therefore not allowed\naccess. \n\n{\n    axios\n      .get(\"https://example.restdb.io/rest/mock-data\", {\n        headers: {\n          \"x-apikey\": \"API_KEY\",\n        },\n        responseType: \"json\",\n      })\n      .then((response) => {\n        this.setState({ tableData: response.data });\n      });\n}\n\nI have also read several answers on Stack Overflow about the same issue, titled Access-Control-Allow-Origin but still couldn't figure out how to solve this. I don't want to use an extension in Chrome or use a temporary hack to solve this. Please suggest the standard way of solving the above issue.\n\nAfter trying out few answers I have tried with this,\n\nheaders: { \n  'x-apikey': '59a7ad19f5a9fa0808f11931',\n  'Access-Control-Allow-Origin' : '*',\n  'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',\n},\n\nNow I get the error as,\n\nRequest header field Access-Control-Allow-Origin is not\nallowed by Access-Control-Allow-Headers in preflight response","ecosystem":"npm","package_name":"reactjs","package_version":null,"solution":"If your backend support CORS, you probably need to add to your request this header:\n\nheaders: {\"Access-Control-Allow-Origin\": \"*\"}\n\n[Update] Access-Control-Allow-Origin is a response header - so in order to enable CORS - you need to add this header to the response from your server.\n\nBut for the most cases better solution would be configuring the reverse proxy, so that your server would be able to redirect requests from the frontend to backend, without enabling CORS. \n\nYou can find documentation about CORS mechanism here:\nhttps://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/45975135/access-control-origin-header-error-using-axios","votes":157,"created_at":"2026-04-19T04:51:33.558146+00:00","updated_at":"2026-04-19T04:51:33.558146+00:00"}