Access to XMLHttpRequest at '…' from origin 'localhost:3000' has been blocked by CORS policy

Question

I have a problem with this error:

 Access to XMLHttpRequest at 'https://...' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. POST https://... net::ERR_FAILED

I am trying to send data but getting a "CORS" error

Am I missing something? Here is my code

 var dataBlob = File; const submit = async () => { //Convert Blob URL to file object with axios const config = { responseType: "blob" }; await axios.get(mediaBlobUrl, config).then((response) => { dataBlob = new File([response.data], "record", { type: "media" }); }); let formdata = new FormData(); formdata.append("sequence", "L"); formdata.append("video", dataBlob); console.log("data", dataBlob); //POST try { console.log(formdata.getAll); let result = await axios({ url: "https://abc...", method: "POST", data: formdata, }); console.log(result.data); } catch (err) { console.log(err); }

Answer 1

It's nothing unusual at all if you try to access 3rd party api providers from your development environment.

You can test a source a prior via:

curl -i -X OPTIONS source/of/your/desire/ping \\ -H 'Access-Control-Request-Method: GET' \\ -H 'Access-Control-Request-Headers: Content-Type, Accept' \\ -H 'Origin: <http://localhost:3000>'

If you'll get back the CORS message, you will need to provide a proxy for your local env.

For CRA (Create React App) apps

There is a quite easy way nowadays for apps that are based on CRA and if you only need to setup one proxy in development. You just need to provide the needed proxy in your package.json :

"proxy": "https://theThirdPartyResource",

See documentation: https://create-react-app.dev/docs/proxying-api-requests-in-development/

Manual way

To avoid CORS issues in your dev environment you can use a proxy provided by eg http-proxy-middleware ( https://www.npmjs.com/package/http-proxy-middleware )

With it installed you can create a file named setupProxy.js in your /src directory like:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = (app) => {
  app.use(
    '/proxy',
    createProxyMiddleware({
      target: 'https://originalApi.com/api/v1',
      changeOrigin: true,
      pathRewrite: {
        '/proxy': '/',
      },
    })
  );
};

In your axios request, you will be able to use:

axios.get('/proxy/suburl', config)
  .then((response) => {
    // what ever you want to do with your response
  }).catch(error => console.log(error))