No 'Access-Control-Allow-Origin' header error in some cases, but not in others

Question

I know there are already a lot of questions about this. I looked at most of them. The server must return a response with the said header, allowing my origin to do requests on it.

However, there is something I don't understand. I am in the process of creating a simple Stash plugin doing a post request when clicking on a button.

I have that error. Ok. But why is the post request working? The post is to launch a build and the build is launched. I still have the error, so on the client side, I display a message saying that the build was not launched...

Even stranger, I have a colleague that did a simple Chrome extension doing the same thing and the error is not displayed in the browser console...

I want to understand why mine fails and his succeeds.

My Stash plugin javascript code:

require(['jquery', 'stash/api/util/state'], function ($, pageState) {
var url = "https://build.company.org:8443/trigger";
var commit = pageState.getCommit();
var repo = pageState.getRepository()

$.post(
    url,
    {
        'code': '9b73fccb6c839d',
        'workflow.repourl': 'ssh://git@stash.company.org:7999/' + repo.project.key + "/" + repo.name,
        'workflow.reponame': repo.project.key + "/" + repo.name,
        'workflow.revision': commit.id,
        'workflow.user': commit.author.name,
        'workflow.message': commit.message
    },
    function (data) {
        AJS.messages.success("#launch-build-message", {
          fadeout: true,
          delay: 5000,
          title: "Success!",
          body: "The build was<br>successfully launched!"
        });
    }
).fail(function () {
    AJS.messages.error("#launch-build-message", {
        fadeout: true,
        delay: 5000,
        title: "Error!",
        body: "The build could not<br>be launched!"
    });
});
});

His Chrome extension javascript:

var build_status_div = $('div.build-status-summary');

var rebuild_div = $('<div class="plugin-item"></div>').insertAfter(build_status_div);
var rebuild_a = rebuild_div.append('<a href=""><span class="aui-icon aui-icon-small aui-iconfont-build" title="Launch another build"></span><span class="label">Launch another build</span></a>');
var success_div = $('<div class="plugin-item build-result build-success"><span>Build started !</span></div>').insertAfter(rebuild_div);
var failure_div = $('<div class="plugin-item build-result build-failure"><span>Could not start the build.</span></div>').insertAfter(success_div);
success_div.hide();
failure_div.hide();

rebuild_a.click(function(ev) {
ev.preventDefault();

$.post(
    'https://build.company.org:8443/trigger',
    {
        'code': '9b73fccb6c839d',
        'property:workflow.repourl': 'ssh://git@stash.company.org:7999/Project_1/Rep_1,
        'property:workflow.reponame': 'Project_1/Rep_1,
        'property:workflow.revision': 'dbc5de00a675996df25cebb6c3cce7fad39247b9',
        'workflow.user': 'Some User',
        'workflow.message': 'test'
    },
    function (data) {
        success_div.fadeIn().delay(5000).fadeOut();
    }
).fail(function () {
    failure_div.fadeIn().delay(5000).fadeOut();
});
});

Answer 1

I have a colleague that did a simple Chrome extension

Chrome extensions are pieces of software that are explicitly installed into the browser. They are granted permission to read data from other websites.

JavaScript on an arbitrary page you visit is given more limited access. If you want to access another origin with XMLHttpRequest, that origin must use CORS to grant your site permission.