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

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

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.

To avoid CORS issues in your dev environment you can use a proxy provided by e.g. 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))