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([], "record", { type: "media" });
    let formdata = new FormData();

    formdata.append("sequence", "L");
    formdata.append("video", dataBlob);

    console.log("data", dataBlob);

    try {
      let result = await axios({
        url: "https://abc...",
        method: "POST",
        data: formdata,
    } catch (err) {


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 (

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) => {
      target: '',
      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))