Error in preflight Cross origin Requests

Question

Hello This thing is really frustrating me.I have to admit i dont understand cross origin requests well. Here is my code:

javascript :

var config = {

            headers: {

                'Access-Control-Allow-Origin' : '*',
                'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
                'X-Parse-Application-Id' : 'xxxx',
                'dataType' :'json',
                'Content-Type' : 'application/json'

            }
      }



    $http.post(link,data_model,config).
      then(function(response) {

        deffered.resolve(response);
      }, function(response) {

        deffered.reject(response)
      });
      return deffered.promise;
  };

This is how i set headers as i post to the server. I am posting to a page called utility.php.

in utility.php i have the following headers;

<?php
    /**
     * End point utility class
     * 
     *
     * @author Tariiq Henry Bbosa
     */
    header('Access-Control-Allow-Origin: *');

    header('Access-Control-Allow-Methods: POST, GET, OPTIONS');

When i try to make my post request i get this error:

XMLHttpRequest cannot load http://localhost:89//fotoserver/utility.php. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

Someone please tell me which header i should include where. So that myy request can go through. Please dnt refer me to a big page to read. Just help me out here.I will read after.

Answer 1

To resolve CORS issue, server should send 'Access-Control-Allow-Origin' : '*',... in its response headers.

If a client is running on a different domain than the server, browser blocks request for security. If server allows Cross-Origin requests, browser won't complain.

So instead of putting the headers in client $http.post() request, put the headers in response of utility.php

During the preflight request, you should see the following two headers: Access-Control-Request-Method and Access-Control-Request-Headers. These request headers are asking the server for permissions to make the actual request. Your preflight response needs to acknowledge these headers in order for the actual request to work.

Reference: https://stackoverflow.com/a/8689332/3830485