'The target origin provided does not match the recipient window's origin' message when trying to use localhost

Question

I am trying to experiment with the Stack Overflow API on my localhost and am struggling to get the authentication to complete. Here is my application JavaScript code (note that I am using IBM Worklight, hence the wl functions):

function wlCommonInit(){

// Common initialization code goes here
SE.init({
    clientId: 4299,
    key: 'Dj9*ZH87BW6Q2hatei2mKw((',
    channelUrl: 'http://localhost:10080/',
    complete: function(data){
        console.log(data);
    }
});
}

$('#submitButton').click(function(){
SE.authenticate({
success: function(data){
    var link='https://api.stackexchange.com/docs/answers#order=desc&sort=activity&filter=default&site=stackoverflow';
    $.getJSON(link+'?callback=?',function(json) {
        if(json.length!=0){
            console.log(json);
            $('h1').insert(json);
        }
    });


},
error: function(data){
    $('h1').insert("Authentication error");
},
scope: []
});
});

Essentially I am trying to return a JSON object using the \answers method.

I have set the OAUTH domain on the App page to localhost. When I deploy the app to the worklight development server and press the #submitButton, I get the following message:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost') does not match the recipient window's origin ('http://localhost:10080').

I have tried numerous potential fixes from discussion forums, but nothing seems to work.

Answer 1

I faced the same issue when I was using the stack exchange API to post a message to stack overflow website. I figured I had to post my application on a domain name. I hosted my application on free domain provided by 000webhost.com. You may wish to take a similar approach.

After deploying the application on the domain, change the oauth domain and the application website on the app edit page. Also, keep in mind you have to link a valid stack apps post (a post made by you on stack apps) in the edit page.

This should work.