Cross-Origin Request Blocked on POST call to api
<p>I know there are many other articles on this topic but unfortunately none of the solutions worked for me.</p>

<p>I am running linux red hat 7.2 with apache 2.4 (httpd). I am working on the server directly as localhost. The API is python based which i have little experience with - i downloaded the program from github <a href="https://github.com/mozilla/http-observatory" rel="nofollow">mozilla http observatory</a>.</p>

<p>I have tried different settings for several hours and have made no progress on this issue and now seeking further assistance.</p>

<p>The main page before I am on before POST is <a href="http://localhost" rel="nofollow">http://localhost</a></p>

<p><strong>Here is the js (ajax)</strong></p>

<p>A POST XHR call is made to: <a href="http://localhost:57001/api/v1/scan" rel="nofollow">http://localhost:57001/api/v1/scan</a></p>

<pre class="lang-none prettyprint-override"><code>function loadTLSObservatoryResults(rescan, initiateScanOnly) {
    'use strict';

    var rescan = typeof rescan !== 'undefined' ? rescan : false;
    var initiateScanOnly = typeof initiateScanOnly !== 'undefined' ? initiateScanOnly : false;

    /*var SCAN_URL = 'https://tls-observatory.services.mozilla.com/api/v1/scan';
    var RESULTS_URL = 'https://tls-observatory.services.mozilla.com/api/v1/results';
    var CERTIFICATE_URL = 'https://tls-observatory.services.mozilla.com/api/v1/certificate';*/
    var SCAN_URL = 'http://localhost:57001/api/v1/scan';
    var RESULTS_URL = 'http://localhost:57001/api/v1/results';
    var CERTIFICATE_URL = 'http://localhost:57001/api/v1/certificate';

    // if it's the first scan through, we need to do a post
    if (Observatory.state.third_party.tlsobservatory.scan_id === undefined || rescan) {
        // make a POST to initiate the scan
        $.ajax({
            data: {
                rescan: rescan,
                target: Observatory.hostname
            },
            initiateScanOnly: initiateScanOnly,
            dataType: 'json',
            method: 'POST',
            error: function() { errorResults('Scanner unavailable', 'tlsobservatory') },
            success: function (data) {
                Observatory.state.third_party.tlsobservatory.scan_id = data.scan_id;

                if (this.initiateScanOnly) { return; }

                loadTLSObservatoryResults();  // retrieve the results
            },
            url: SCAN_URL
        });
</code></pre>

<p><strong>Here is my httpd.conf</strong></p>

<p>basically just included this line:
<code>LoadModule headers_module modules/mod_headers.so</code></p>

<p><strong>Here is my .htaccess file:</strong></p>

<pre class="lang-none prettyprint-override"><code>RewriteEngine On

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
</code></pre>

<p>I have restarted apache but i see the same warning in the developer console:</p>

<p><code>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:57001/api/v1/scan. (Reason: CORS header 'Access-Control-Allow-Origin' missing).</code></p>

<p>Out of curiosity, are you using a Javascript build environment like Ember or Angular on the client side? Because that will affect your hosted port, and could contribute to cross-origin related errors.</p>

<p>Another thing you could do is to modify your ajax slightly and create a helpder function as so:</p>

<pre><code>    function myCallbackFunction(data){
            Observatory.state.third_party.tlsobservatory.scan_id = data.scan_id;

            if (this.initiateScanOnly) { return; }

            loadTLSObservatoryResults();  // retrieve the results

    }



     // make a POST to initiate the scan
    $.ajax({
        data: {
            rescan: rescan,
            target: Observatory.hostname
        },
        initiateScanOnly: initiateScanOnly,
        dataType: 'jsonp',

        method: 'POST',
        error: function() { errorResults('Scanner unavailable', 'tlsobservatory') },
        jsonpCallback: 'myCallbackFunction'
        url: SCAN_URL
    });
</code></pre>

<p>Try this and let me know if it works for you.</p>

jquery python