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 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);
    }

• javascript
• reactjs
• axios

• Please don't post images. Post the code in the question. – Hans Krohn Commented Aug 25, 2021 at 4:19
• Please do not upload images of code/errors when asking a question. – Phil Commented Aug 25, 2021 at 4:19
• Remove headers. Your syntax is wrong and you shouldn't be including that header anyway – Phil Commented Aug 25, 2021 at 4:21
• Please post the actual code; However you haven't mentioned name in your code anywhere. – Lakshaya U. Commented Aug 25, 2021 at 4:22
• 2 You cannot solve CORS errors from the client-side. Either the API you're attempting to use supports CORS or you use a proxy. Those are your only options – Phil Commented Aug 25, 2021 at 4:52

1 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 e.g. http-proxy-middleware (https://www.npmjs./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./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))