CODEWITHSUNDEEP
javascriptreactjsaxios
Four
Four

Reputation: 154

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

Upvotes: 3

Views: 11828

Answers (1)

grenzbotin
grenzbotin

Reputation: 2565

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

Upvotes: 3

Related Questions