PDA

View Full Version : Upload file into different domain/port combination



harel
16 Aug 2013, 3:10 AM
Hi there,
Is there a way to upload a file via extjs to another domain and/or port? We are using CORS but when we use the form Panel for the upload we always get this error since the iframe the form generates is from a different port.

Blocked a frame with origin "http://localhost:8000" from accessing a frame with origin "http://localhost:8001". Protocols, domains, and ports must match.

Is there a way around it? We were under the impression that using CORS mitigates around this problem as it does with our regular requests (all our requests from the UI go to our API domain).

Thanks
Harel

Gary Schlosberg
19 Aug 2013, 12:07 PM
My understanding is that CORS should allow access between different ports, and would be needed even if the domain names were the same. Are you using a browser that supports it? What does your configuration look like?

tangix
19 Aug 2013, 9:12 PM
For CORS to work properly the receiving server must send the correct headers during browser preflight checks (OPTIONS request). Check the reply to OPTIONS call and specially the headers set by the client and server.
See MDN's page on this:
https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS?redirectlocale=en-US&redirectslug=HTTP_access_control

For apache running on Debian I have the following configuration that works with CORS in recent browsers (I have tested with Chrome, FF and IE9/10).
The first line is a regex setting an apache ENV variable to allow me to match part of the domain name (Origin header is set by the browser in the preflight check). This work-around is required as Access-Control-Allow-Origin doesn't accept wildcards.


SetEnvIf Origin "http(s)?://.*(tangix\.local|tangix\.com)$" AccessControlAllowOrigin=$0
Header set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header set Access-Control-Allow-Methods "OPTIONS,GET,POST"
Header set Access-Control-Allow-Credentials true
Header set Access-Control-Allow-Headers X-Requested-With

harel
20 Aug 2013, 1:01 AM
CORS is utilised by our front and back end ok. However, EXT is unable to generate the iframe used in the upload with the error (in the js console):

Blocked a frame with origin "http://localhost:8000" from accessing a frame with origin "http://localhost:8001". Protocols, domains, and ports must match.

So had it generated the iframe the upload would have (presumably and allegedly) worked...

harel
20 Aug 2013, 1:43 AM
The iframe seems to kill the session (django) and essentially log the whole session out.
As well, if we open a new browser tab, and hit a url in a different port (same as would have happen in the iframe) it logs us out as well...

All other api calls from the UI (to another port) pass in a token in the headers but we cannot seem to add that header token to the iframe when doing the upload

harel
20 Aug 2013, 4:47 AM
In the end we resolved the issue with a bit of django middleware. If the Authorization header was not present but existed as a post/get param it is copied to the header before reaching the authorisation code.

Still this outlines the issue we cannot put custom headers into form submits with file uploads....