POST 图像时出现 CORS 错误答案

【问题标题】：CORS Error when POST imagePOST 图像时出现 CORS 错误
【发布时间】：2018-04-01 11:14:48
【问题描述】：

我正在使用 Ionic 3 和一个自己的 REST Api，它使用 Slim 框架并具有对服务器的完全访问权限。

尽管如此，每个 API 调用（GET、POST、PUT 和 DELETE）：

let formData = new FormData();
formData.append("file",image);
return this.httpClient.post("https://myurl.com/api/v1/image,formData)

imageURL 是我的服务器 API，image 是我从 cordova 相机插件获取的路径。

这是我的服务器错误：

[Error] Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.
[Error] XMLHttpRequest cannot load https://hobbyrea.com/api/v1/user/image due to access control checks.

这是我的服务器端标头的样子：

$app->options('/{routes:.+}', function ($request, $response, $args) {
    return $response;
});
$app->add(function ($req, $res, $next) {
    $response = $next($req, $res);
    return $response
        ->withHeader('Access-Control-Allow-Origin', '*')
        ->withHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Accept, Origin, Authorization')
        ->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
});

谁能给我一个建议，为什么我会收到此 API 调用的错误？

编辑：

我从 iPhone 访问 API。

编辑 2：我使用科尔多瓦文件传输插件。请记住在 PHP 设置中升级upload_max_filesize。它会为您省去很多麻烦：D

【问题讨论】：

我认为与您的离子有关。你配置代理了吗？像这样..stackoverflow.com/a/38359981/2249037
这个请求来自哪里：localhost:8080
试试 Mozilla Firefox 可能不会出现这个问题
如果 OPTION 请求已通过并被接受，请检查网络 (devTools)。这是发送预检请求的标准程序。也许您的后端需要检查这是否是一个选项请求并接受它。
这是在浏览器中运行时用于 CORS 的 solution。如果您在设备中运行，通常您将不会面临 CORS 问题。但是如果你在ios中使用WKWebView，你的请求需要使用@ionic-native/http

标签： angular ionic-framework ionic3 slim

【解决方案1】：

将客户端的 Origin 添加到服务器允许的 origins 标头中。

Access-Control-Allow-Origin: http://localhost:8080

【讨论】：