Origin [URL] is not allowed by Access-Control-Allow-Origin when running 2 applications on 2 ports on my local server
<p>I am running an API on my local server port 8000. In other words, <strong>127.0.0.1:8000/api</strong> returns JSON data when the method is get. I know this because if I make an ajax request from one of its views, I get the correct return data.</p>

<p>Now, I am trying to get this API to work with 3rd party websites as well. So I built another app, and ran it on port 8080. In other words, going to <strong>127.0.0.1:8080</strong> runs the following JS code:</p>

<pre><code>(function() {
    $.ajax({
        url: 'http://127.0.0.1:8000/api/',
        type: 'GET',
        dataType: 'json',
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        success: function( json ) {
            console.log('Success');
        },
        error: function( req, status, err ) {
            console.log(req + status + err);
        }
    });
})();
</code></pre>

<p>Note: I ran this code with the API running on port 8000. However, I get this error in my console:</p>

<pre><code>[Error] XMLHttpRequest cannot load http://127.0.0.1:8000/api/. Origin http://127.0.0.1:8080 is not allowed by Access-Control-Allow-Origin.
</code></pre>

<p>What is going on? How can I fix this, and test my API on my local server? Any help will be greatly appreciated!</p>