About cross-domain issues with uploading files

In the process of developing a new framework, a custom page component is required to implement the file (image) upload from the form, taking into account the Attachmentsimple custom notation of the WEX5. The use of third-party plug-in Webuploader to implement the selection of files after the call server upload file interface for automatic upload.

In the middle of the cross-domain problem, that is, the service side of the interface domain name and plug-in package (front end) is not the same domain name, but because the format is a file, it must be used post transmission mode

Workaround:

Request data across domains using Cors for post mode

Cors Full name Cross-origin Resource sharing, as the name implies: cross-domain sharing of resources, this is the development of cross-site resource sharing standards.

Currently includes ie10+, Chrome, Safari, FF all provide XMLHttpRequest object to the standard support, in the older IE8 provided Xdomainrequest object, partial implementation of the standard;

An options sniffer is issued before a POST request is made with the XMLHttpRequest object to determine if there is a cross-domain request, and the origin information on the header is used to indicate the source site information. The server responds with the value of the Access-control-allow-origin header to match the origin information.

Header ("Access-control-allow-origin:http://localhost"); * For all domains

The disadvantage of cors is that you must be able to control server-side permissions, allowing you to access across domains

Setting Cors for cross-domain requests

First, the use of PHP code implementation (write at the beginning of the interface)

$request _method = $_server[' Request_method ');

if ($request _method = = = = ' OPTIONS ') {

Header (' Access-control-allow-origin: '. $origin);
Header (' access-control-allow-credentials:true ');
Header (' Access-control-allow-methods:get, POST, OPTIONS ');

Header (' access-control-max-age:1728000 ');
Header (' Content-type:text/plain charset=utf-8 ');
Header (' content-length:0 ', true);

Header (' status:204 ');
Header (' http/1.0 204 No Content ');

}

if ($request _method = = = = ' POST ') {

Header (' Access-control-allow-origin: '. $origin);
Header (' access-control-allow-credentials:true ');
Header (' Access-control-allow-methods:get, POST, OPTIONS ');

}

if ($request _method = = = = ' GET ') {

Header (' Access-control-allow-origin: '. $origin);
Header (' access-control-allow-credentials:true ');
Header (' Access-control-allow-methods:get, POST, OPTIONS ');

}

Second, the use of Nginx configuration implementation

Location/{

Set $origin ' * ';

if ($request _method = ' OPTIONS ') {

Add_header ' Access-control-allow-origin ' $origin;

#
# Om Nom Nom cookies
#
Add_header ' access-control-allow-credentials ' true ';
Add_header ' Access-control-allow-methods ' GET, POST, OPTIONS ';

#
# Custom headers and headers various browsers *should* be OK with but aren ' t
#
Add_header ' Access-control-allow-headers ' Dnt,x-mx-reqtoken,keep-alive,user-agent,x-requested-with, If-modified-since,cache-control,content-type ';

#
# Tell Client The This pre-flight info was valid for
#
Add_header ' Access-control-max-age ' 1728000;
Add_header ' Content-type ' Text/plain charset=utf-8 ';
Add_header ' content-length ' 0;

return 204;

}

if ($request _method = ' POST ') {

Add_header ' Access-control-allow-origin ' $origin;
Add_header ' access-control-allow-credentials ' true ';
Add_header ' Access-control-allow-methods ' GET, POST, OPTIONS ';
Add_header ' Access-control-allow-headers ' Dnt,x-mx-reqtoken,keep-alive,user-agent,x-requested-with, If-modified-since,cache-control,content-type ';

}

if ($request _method = ' GET ') {

Add_header ' Access-control-allow-origin ' $origin;
Add_header ' access-control-allow-credentials ' true ';
Add_header ' Access-control-allow-methods ' GET, POST, OPTIONS ';
Add_header ' Access-control-allow-headers ' Dnt,x-mx-reqtoken,keep-alive,user-agent,x-requested-with, If-modified-since,cache-control,content-type ';

}

}

About cross-domain issues with uploading files