I follow the Node.js sample project (https://github.com/cloudinary/cloudinary_npm/tree/master/samples) to develop a simple web application that allows users to upload their profile picture. When I try to upload an image directly from the browser, I receive an error with the message shown below:
XMLHttpRequest cannot load https://api.cloudinary.com/v1_1/mycloudname/auto/upload. The request was redirected to 'http://localhost:3000/cloudinary_cors.html?bytes=411&created_at=2015-11-23T…s=%23%3CSet%3A0x0000000c75f2e0%3E&type=upload&version=1448287679&width=175', which is disallowed for cross-origin requests that require preflight.
As described, the problem may be due to CORS support on the my node server, so I went back to my server code and made sure the cloudinary_cors.html can be found by the callback. I ran a test again and still I'm getting the same error. I managed to find the OPTIONS and POST request for uploading the photo from the console, and the POST request got back 302 (please find the attached response message for reference). However, the image can be found on the Cloudinary dashboard. How am I able to resolve this issue? Any input will be appreciated!
Remote Address:23.23.xxx.xxx:443 Request URL:https://api.cloudinary.com/v1_1/mycloudname/auto/upload Request Method:POST Status Code:302 Found Response Headers view source Access-Control-Allow-Methods:POST, GET, OPTIONS Access-Control-Allow-Origin:http://localhost:3000 Access-Control-Max-Age:1728000 Cache-Control:no-cache Connection:keep-alive Content-Length:840 Content-Type:text/html; charset=utf-8 Date:Mon, 23 Nov 2015 14:07:59 GMT Location:http://localhost:3000/cloudinary_cors.html?bytes=411&created_at=2015-11-23T14%3A07%3A59Z&delete_token=04963d1a6e5957ee8179c67879c0bc59241f7875fa3a29f430ee7ed942509ea7e0a302627a3b4927ea1cddb2ce2a4028e98d8130b363fdb27901c55a1edb0e9c73e88b027598f3ed1fcc55111ec618d5747d2a16ce80c4036b35d2b778ee81964e2c9014c5e4d796a04b0106f607b9af9bae058c76f4643ccbccaa4fda81968d4728427dfa0ae398fa8322c3760bee45e232336b0464fd0233313d082945e63878d137ddd98e77db9088b6835df8c0905e9e109e3df1add8da50c8b895e503b7&am... Server:cloudinary Status:302 Found X-Request-Id:5dae5c1d34551a10 X-UA-Compatible:IE=Edge,chrome=1 Request Headers view source Accept:/ Accept-Encoding:gzip, deflate Accept-Language:en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4 Connection:keep-alive Content-Length:1197 Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryhrzAgVFkPZMRAPo9 Host:api.cloudinary.com Origin:http://localhost:3000 Referer:http://localhost:3000/users/1234567 User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36 Request Payload ------WebKitFormBoundaryhrzAgVFkPZMRAPo9 Content-Disposition: form-data; name="timestamp"
1448287672 ------WebKitFormBoundaryhrzAgVFkPZMRAPo9 Content-Disposition: form-data; name="callback" http://localhost:3000/cloudinary_cors.html ------WebKitFormBoundaryhrzAgVFkPZMRAPo9 Content-Disposition: form-data; name="return_delete_token" 1 ------WebKitFormBoundaryhrzAgVFkPZMRAPo9 Content-Disposition: form-data; name="signature" 19f131b28f7da0bca1e78bf8b0820abc8653206e ------WebKitFormBoundaryhrzAgVFkPZMRAPo9 Content-Disposition: form-data; name="api_key" 367827361899815 ------WebKitFormBoundaryhrzAgVFkPZMRAPo9 Content-Disposition: form-data; name="file"; filename="default_qrcode.png" Content-Type: image/png ------WebKitFormBoundaryhrzAgVFkPZMRAPo9--