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

I'm rather new to this, so I'd appreciate any help I can get...again I've tried the iframe file upload, so please don't suggest it unless you can give me full working code...

Thanks!

As from this
you can solve this by adding <?php header('Access-Control-Allow-Origin: *'); ?> in your header.Please check and let us know if this solved your problem.

@IIM I've tried that already, but I still get the same error

@IIM it should work according to the docs for the plugin...but it doesn't

You should check your .htaccess files
I also try to modify the headers from PHP, it didn't work, but it works when i modify in .htaccess files

// Raw header
Access-Control-Allow-Origin: *

// How to send the response header with PHP
header("Access-Control-Allow-Origin: *");

// How to send the response header with Apache (.htaccess)
Header set Access-Control-Allow-Origin "*"

// How to send the response header with Nginx
add_header 'Access-Control-Allow-Origin' '*';

// How to send the response header with Express.js
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    next();
});
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.