Origin is not allowed by Access-Control-Allow-Origin
I've set up a GE site (v3.15) and HTML5 viewer (v1.3) on two different servers. There are a couple of workflows configured in the site. IE9 can run the workflow, but IE10 fails. Chrome and Firefox also fail. An alert is displayed indicating the workflow cannot be loaded from the server hosting the site.
The developer tools in Chrome display an error message "Origin <http://server.domain> is not allowed by Access-Control-Allow-Origin".
I've tried various entries in the proxy.config file on the server hosting the viewer, but nothing seems to allow Chrome or Firefox to run the workflow. I intentionally misconfigured the proxy.config file and that changed the error message, so it seems the proxy page is being accessed. The misconfiguration also caused IE 9 to fail.
Is there somewhere else I need to be setting permission for the viewer to have access to the workflow?
-
I've been digging a little deeper into this problem. I've set the proxy.config file so it says: <ProxyConfig mustMatch="false">
According to the note in the proxy.config file, that should proxy everything. Still no luck with the workflows running in Firefox or Chrome.
Next I took a look at the application setting for the folder the proxy page is in. I'm using the default proxy page. I changed from pass-through authentication to a specific user and made sure that account has access to the files. Also tried different application pool identities. Still can't get anything other than IE to work.
That IE works and the other browsers do not has me thinking this is an authentication problem (this is all on the internal network so far) but no security has been applied to the site or map service. I'm at a loss as to why the proxy page being set to proxy any site isn't having any impact on the non-IE browsers.
0 -
Hi Steven,
When the HTML5 Viewer is hosted on a different server than Essentials, you can get around these access control errors by adding three headers to the REST application in IIS:
1. Open up IIS on the server hosting Essentials, and go to the Geocortex > Essentials > REST application
2. Click on HTTP Response Headers
3. Add the following Headers:
- Access-Control-Allow-Headers: X-Requested-With
- Access-Control-Allow-Methods: POST,GET,OPTIONS
- Access-Control-Allow-Origin: http://serverHostingtheViewer.domain.com
For more info please see https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS
-Victoria
0 -
Thank you, Victoria! That was the missing piece I needed. The workflows are running on the other browsers now, too.
Steve
0 -
Chrome will have blocked the cross-domain frame the moment it tried to access the DOM of the parent page. I doubt CORS will help here.
When you have to have cross-origin frames communicating with each other, you must communicate safely via message passing. See "window.postMessage": https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
0 -
:-(
0 -
You are correct : "Access-Control-Allow-Headers" is the header name and "X-Requested-With" is the value.
Same-origin policy can be a bummer, but it's been really important for security on the web.
0 -
Thanks Jason.
I was able to utilize the postMessage API to get my website with an embedded viewer to communicate with the viewer's index.html on another domain to call the workflow. Although not elegant, it did work!
-Erik
0 -
If I want to use the PostMessage API to run commands on the server-side of the viewer, how would you propose I pass in command parameters?
For instance, I want to run a search for a specific ID. How do I get the ID across?
The message from website server will deliver a message to the viewer server, which will indicate which function to run, but it will not contain any parameters from the message.
The only way I see to do this is perhaps send a parameter following a special character (&) that can be indexed and parsed by the receiver of the message using String Object Methods. Is this accurate?
0 -
Nevermind, I was able to get this to work using the subStr function for searching for things before and after a comma.
0 -
Further, cross origin messaging is not fully supported in IE8-10.
http://caniuse.com/#feat=x-doc-messaging
It seems like IE8-9 are more forgiving in my particular issue as it will allow x-origin messaging, but only within frames/iframes, but I unfortuna tly tested in IE10 after developing in Chrome and had been banging my head for a little while. It appears that IE10 distinctly doesn't like x-origin messaging regardless.
0 -
Hi Erik and Jason,
I came to the same error with my viewer with workflow functions been embedded as ifram into the application page. Because the viewer is at GIS server, and the web page is from the App Server, I am hitting the same error. I have tried to implement the PostMessage as described in the refered document. However, I never be able to get it works.
This is what I did:
1. in my parent page at the App Server, I add the following code at head script section:
function GetMapExtent() {
var gcxViewer = document.getElementById("gcxViewer");
if (gcxViewer.contentWindow) {
try
{
gcxViewer.contentWindow.postMessage("GetMapExtent", "*");// the following is code that works on the same domain.
//if (typeof (gcxViewer.contentWindow.GetMapExtent) == "function") {
// gcxViewer.contentWindow.GetMapExtent();
//}
}
catch (err)
{
alert("GetMapExtent Error==>" + err.message);
}
}
}
function receiveMessage (event) {
alert ("Recieved Message in origin:" + event.origin);
alert ("received message in data:" + event.data);
alert ("received message in source:" + event.source);
}
if (window.addEventListener) {
window.addEventListener('message', receiveMessage);
}
else { // IE8 or earlier
window.attachEvent('onmessage', receiveMessage);
}
2. in the viewer index.html page on the GIS server, I add the this section:
function messageHandler(event) {
if (event.data == "GetMapExent") {
GetMapExtent();
event.source.postMessage("GetMapExtent completed successfully in GIS server.", event.origin);
}
}
if (window.addEventListener) {
window.addEventListener('message', messageHandler);
}
else { // IE8 or earlier
window.attachEvent('onmessage', messageHandler);
}Did I miss something?
Could you kindly show an example please?
thanks
Helen
0 -
i would like to learn more about this technique, can you post samples of the app page html and the server index html? could you post the html code of your samples? 0 -
i would like to use the post message as in the example above, but i cannot seem to get it working. we use the chrome browser for our html5 apps, is that the problem? or is something missing from the example. 0
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.
Kommentare
13 Kommentare