android live设备上的离子和电容器的CORS问题

Posted 2023-03-04

【中文标题】android live设备上的离子和电容器的CORS问题

【英文标题】：CORS Issue with Ionic & Capacitor on android live device

【发布时间】：2021-01-04 18:19:06

【问题描述】：

希望有人可以在这里帮助我；尝试通过 POST 上传图像时，尝试使用带电容器的 Ionic 并仅在 android 9 Live 设备上遇到以下 CORS 错误：

E/Capacitor/Console: File: http://localhost/add-item - Line 0 - Msg: Access to XMLHttpRequest at 'https://MYURLGOESHERE/api.php' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

在离子中：

import  HttpClient, HttpHeaders, HttpRequest  from '@angular/common/http';

...

this.http.post("https:://MYURLGOESHERE/api.php", postObject, headers: 
     'Content-Type': 'application/x-www-form-urlencoded'
     
)

...

API PHP 脚本：

<?php
header('Access-Control-Allow-Origin: *');
header("Access-Control-Expose-Headers: access-control-allow-origin");
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Headers: *');
header('Access-Control-Max-Age: -1'); 
header('Access-Control-Allow-Methods: GET,POST,OPTIONS');
header('Content-Type: application/json'); 

...

我检查了服务器上的所有最大上传大小都超过了我尝试上传的图像大小，并且我使用以下 CURL 测试确认不存在 CORS 错误：

curl -H "Access-Control-Request-Method: POST" -H "Origin: http://localhost" -I --head https://MYURLGOESHERE/api.php

我完全不知道问题可能是什么。所有其他未在设备上上传图像的 POST 请求都没有相同的 CORS 问题。有人对这里可能发生的事情或我可以检查的其他事情有任何想法吗？

【参考方案1】：

对于遇到同样问题的任何人，解决方案是删除标题

'Content-Type': 'application/x-www-form-urlencoded'

来自发布请求，并解决了所有平台的问题。

【讨论】：

真正的问题是你使用了错误的 Content-Type，如果你手动添加 Content-type 它应该是 'multipart/form-data'