向Cloudinary上传角度形状数据时出现Cors错误

Question

您好，我正在尝试从本地主机角度应用程序将图像上传到cloudinary api，并出现以下错误

访问位于“”的XMLHttpRequesthttps://api.cloudinary.com/v1_1/xxxxxx/image/upload“起源”http://localhost:4200'已被CORS策略阻止：飞行前响应中的访问控制允许标头不允许请求标头字段类型。

我的角形式和超文本传输协议请求：

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

Answer 1

CRO跨源问题-调用API时无法连接数据库-

通常情况下，当一些API方法需要2个参数（名称，图像），但在角度应用中，我们称为Post方法

这里为图像上传/更新-postImages（）-没有标题Content-Type而不是post（）

不要把图像串起来-

数据服务：

标题截取器：

组件调用API（上传图像从表单添加名称-

Answer 2

此问题有三种解决方案：

1. 从服务器端禁用cors策略
2. 在浏览器中禁用cors，例如google chromehttps://alfilatov.com/posts/run-chrome-without-cors/
3. 创建代理文件并通过该文件连接到服务器

代理json

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

环境ts

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

并使用下面的命令运行

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