0

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. :)

Here's the response headers for the failed OPTIONS request. The code should work, but I'm not sure if there's something on the IIS server blocking it? I just got admin access to the server, so I'm still getting used to it...

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
2
Contributors
4
Replies
27
Views
4 Years
Discussion Span
Last Post by calebcook
0

Again I've tried the iframe file upload, so please don't suggest it unless you can give me full working code...

@calebcook

I don't need any code from you. The error you post gave me the answer to your question.

MLHttpRequest cannot load http://www.example.com/upload/. Origin http://admin.example.com is not allowed by Access-Control-Allow-Origin.

You need to understand about Access-Control-Allow-Origin

There can only be one Access-Control-Allow-Origin response header, and that header can only have one origin value.

Therefore, in order to get it to work, you need to have a code that can you get the origin request header and check the origin value once it's check and if it is valid, sets the Access-Control-Allow-Origin header with that value and that error will be remove.

I hope that make sense.

If not I will explain more.

0

@LastMitch could you please post example code? I'm not understanding it completely...

0

ok...now I'm just uploading to the same domain, and using FTP to move the file to the other domain...that seems to work now. Thanks!

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.