I am using the jQuery File Upload plugin by Blueimp to upload images to a server. The problem is, the sending server is admin.example.com
, and the receiving server where the images are stored is on www.example.com
. Same domain, different subdomain.
I followed the instructions here on setting up cross-domain uploads, and everything seems to be correct as far as code, but when I try to upload the images, I get this error:
XMLHttpRequest cannot load http://www.example.com/upload/. Origin http://admin.example.com is not allowed by Access-Control-Allow-Origin.
The upload folder does have read and write permissions.
I'm going to post my code below-if anyone can show me how to fix this, please let me know. I had asked about this before and was going to try some other solutions (iframe uploads and ftp file moving). Neither of these will be best for my situation, and it would be easiest if I could just do it this way...
RECEIVING SERVER
index.php
<?php
header('Access-Control-Allow-Origin: http://admin.example.com'); //I have also tried the * wildcard and get the same response
header("Access-Control-Allow-Credentials: true");
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Max-Age: 1000');
header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description');
?>
<?php
error_reporting(E_ALL | E_STRICT);
require('UploadHandler.php');
$upload_handler = new UploadHandler();
SENDING SERVER
main.js
$(function () {
'use strict';
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
// Uncomment the following to send cross-domain cookies:
xhrFields: {withCredentials: true},
url: 'http://admin.example.com/upload/',
disableImageResize: false,
dropZone: $('#dropzone'),
imageMaxWidth: 1800,
imageMaxHeight: 1800,
});
});
Again I've tried the iframe file upload, so please don't suggest it unless you can give me full working code...
I have also tried header('Access-Control-Allow-Origin: *');
but get the same error...I'm trying to get this finished by the weekend so I'd appreciate any help I can get. :)
Thanks!
EDIT: here's the response headers for the failed OPTIONS request
Allow:OPTIONS, TRACE, GET, HEAD, POST
Content-Length:0
Date:Tue, 27 Aug 2013 15:08:29 GMT
Public:OPTIONS, TRACE, GET, HEAD, POST
Server:Microsoft-IIS/7.5
X-Powered-By:ASP.NET
You can add the origin of the request to the list of domains authorized to access the server's resources by adding it to the values of the Access-Control-Allow-Origin header. You can set it via the header() function of PHP (https://www.php.net/manual/fr/function.header.php).
Run the following command to confirm the origin server returns the Access-Control-Allow-Origin header. Replace example.com with the required origin header. Replace https://www.example.net/video/call/System.generateId.dwr with the URL of the resource that's returning the header error.
What is the Access-Control-Allow-Origin response header? The Access-Control-Allow-Origin header is included in the response from one website to a request originating from another website, and identifies the permitted origin of the request.
I would try to set this on the web.config since you're operating on an IIS server:
https://gist.github.com/corydeppen/3518666
<system.webServer>
<httpProtocol>
<customHeaders>
<!-- allowing all-->
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
I use this headers and its work for me
header('content-type: application/json; charset=utf-8');
header("access-control-allow-origin: *");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With