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

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

angular cors

Angular 向Cloudinary上传角度形状数据时出现Cors错误,angular,cors,Angular,Cors,您好，我正在尝试从本地主机角度应用程序将图像上传到cloudinary api，并出现以下错误访问位于“”的XMLHttpRequesthttps://api.cloudinary.com/v1_1/xxxxxx/image/upload“起源”http://localhost:4200'已被CORS策略阻止：飞行前响应中的访问控制允许标头不允许请求标头字段类型我的表单和http请求： <input type="file" #file (change)="

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

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

我的表单和http请求：

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

此问题有三种解决方案：

从服务器端禁用cors策略

在浏览器中禁用cors，例如google chrome

创建代理文件并通过该文件连接到服务器

proxy.json

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

环境科技

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

并使用下面的命令运行

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

此问题有三种解决方案：

从服务器端禁用cors策略

在浏览器中禁用cors，例如google chrome

创建代理文件并通过该文件连接到服务器

proxy.json

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

环境科技

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

并使用下面的命令运行

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

CRO跨源问题-无法连接到数据库调用API时->请求无法到达API服务器

通常在某些API方法需要2个参数（名称、图像）的情况下但在angular应用程序中，我们调用了Post方法并向其传递了单个参数（name）

此处用于图像上载/更新-postImages（）-无标题内容类型而不是post（）

不字符串化图像->字节将丢失（创建新的张贴路线：张贴图像）

数据服务：

标题截取器：

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