Cors error on Angular Form data upload to Cloudinary

Question

Hi I am trying to upoload images to cloudinary api from my localhost angular application and get the following error

Access to XMLHttpRequest at 'https://api.cloudinary.com/v1_1/xxxxxx/image/upload' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field type is not allowed by Access-Control-Allow-Headers in preflight response.

My angular form and http request :

<input type="file" #file (change)="onChange(file.files)" multiple />

onChange(files: FileList) {
    this.files = Object.values(files);

    const headers = new HttpHeaders({
      'Content-Type': 'multipart/form-data',
      'Accept': 'application/json',
      'Type': 'formData'
    });

    for (let file of this.files) {
      var data = new FormData();
      data.append('file', file);
      data.append('upload_preset', 'pics');

      this.http
        .post(
          'https://api.cloudinary.com/v1_1/xxxxxxxx/image/upload',
          file,
          {
            headers
          }
        )
        .subscribe(
          resData => {
            console.log(resData);
          },
          errorMessage => {
            console.log(errorMessage);
          }
        );
    }
  }

What happens if you remove the 'Type': 'formData' header setting from your frontend JavaScript code? — sideshowbarker
Removing the complete header information worked! Looks like angular configured the header information? — Revanth Bysani

Diako Amir Diako Amir · Accepted Answer · 2020-07-04T08:58:54

There is three solution for this issue:

disable cors policy from server-side
disable cors in the browser, for example for google chrome https://alfilatov.com/posts/run-chrome-without-cors/
create a proxy file and through that connect to the server

proxy.json

  "/api/**": {
    "target": {
      "host": "https://api.cloudinary.com/v1_1/xxxxxxxx/image/upload",
      "protocol": "https:",
      "port": 80
    },
    "secure": false,
    "changeOrigin": true,
    "logLevel": "info"
  }

environment.ts

export const environment = {
  production: false,
  apiUrl: '/api/alpha/v1',
};

and run angular with below command

ng serve --proxy-config proxy.json -o

Cors error on Angular Form data upload to Cloudinary

2 Answers