CORS Error when POST image

Question

I'm using Ionic 3 and an own REST Api using Slim Framework with full access to the server.

Every API call (GET, POST, PUT and DELETE) despite of this:

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

The imageURL is my server API and image is the path which I get from the cordova camera plugin.

This is my Server error:

[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.

This is what my server-side headers looks like:

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

Can anybody give me an advice why I get the error with this API call?

EDIT:

I access the API from an iPhone.

EDIT 2: I use the cordova file-transfer plugin. Please keep in mind to upgrade the upload_max_filesize in the PHP settings. It would save you a lot of headache :D

i think related with your ionic. have you configure the proxy? like this.. https://stackoverflow.com/a/38359981/2249037 — Sh4m, Oct 20 '17 at 09:53
Check in network (devTools) if OPTION request has passed and it's accepted. It's standard procedure with sending preflight request. Maybe your backend need to check if this is a option request and accept it. — Patryk Brejdak, Oct 20 '17 at 09:57
@Henry I edited my answer. The requests comes from an iPhone — TdoubleG, Oct 20 '17 at 10:11
@Szarik Like I already wrote. Every request works just the upload api doesn't — TdoubleG, Oct 20 '17 at 10:12
@TdoubleG its very long time ago im facing this.. but im using angularjs run on npm server.. and call slim php on apache server.. i manage solve that on npm server.. i just need to add those CORS config... — Sh4m, Oct 20 '17 at 10:16
@TdoubleG sorry my bad, just another thought shouldn't you add headers also to request? look at this [link](https://stackoverflow.com/a/44417931/4700863) — Patryk Brejdak, Oct 20 '17 at 10:17
@Szarik unfortunately this doesn't work. thank you anyway for your help :) — TdoubleG, Oct 20 '17 at 10:40
@Sh4m this doesn't work also. I'm a little bit confused because I run "ionic cordova run ios --device". I don't get it why it's origin is "localhost:8080" and not something like "file://" — TdoubleG, Oct 20 '17 at 10:41
@TdoubleG last shot, I used to have this problem when there was internal error at backend. Check logs, maybe you are sending something that server can't handle or something like this. — Patryk Brejdak, Oct 20 '17 at 10:45
@Szarik the request works. It works on Postman :/. It's just the CORS Error... — TdoubleG, Oct 20 '17 at 10:48
@TdoubleG maybe it's cordova issue try this [link](https://stackoverflow.com/a/37398805/4700863) — Patryk Brejdak, Oct 20 '17 at 10:53
Here is the [solution](http://blog.ionic.io/handling-cors-issues-in-ionic/) for CORS when you run in browser. If you run in device, normaly you will **not** face CORS issue. But if you use [WKWebView](http://blog.ionic.io/wkwebview-for-all-a-new-webview-for-ionic/) in ios, you need to use [@ionic-native/http](http://ionicframework.com/docs/native/http/) for your request — Duannx, Oct 21 '17 at 02:09
@Duannx this doesn't work either. I wonder why the image upload works with the cordova file transfer plugin for some images. With other images I get an error from my server "filename could not be empty" — TdoubleG, Oct 24 '17 at 06:43
I found the problem why the cordova plugin fails. It was because of the upload_max_filesize setting for PHP. So I'm using the plugin now for uploading. Thank you all! — TdoubleG, Oct 24 '17 at 12:36

score 0 · Answer 1 · answered Oct 21 '17 at 22:20

0

Add the client's Origin to your server's allowed origins header.

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

answered Oct 21 '17 at 22:20

Scriptonomy

3,975
1
15
23

CORS Error when POST image

1 Answers1