Question

192

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

rated 0 times [ 197] [ 5] / answers: 1 / hits: 9061 / 3 Years ago, wed, august 25, 2021, 12:00:00

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

    }

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

marisela

Add To Favorites

Follow

Total Points: 103

Total Questions: 105

Total Answers: 102

Location: Solomon Islands

Member since Fri, Oct 8, 2021

3 Years ago

marisela questions

1 How to escape double and single quotes in a JSON array

Wed, Oct 21, 20, 00:00, 4 Years ago

1 TypeError: Cannot read property 'contentWindow' of undefined

Sat, Aug 15, 20, 00:00, 4 Years ago

1 Jest import statement: 'TypeError: Cannot set property 'fillStyle' of null'

Sun, Aug 2, 20, 00:00, 4 Years ago

1 Validation using Yup to check number length

Tue, Nov 19, 19, 00:00, 5 Years ago

1 React, how do I embed < br/> in jsx expressions

Tue, Aug 6, 19, 00:00, 5 Years ago

View All

answered 3 Years ago leog · Accepted 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.

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.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))