AngularJS, PHP Restoring Cors issue

I have a problem with calling $ http to my rest php server. I am making cross domain calls from client to server.

In my Angular app, the $ http service is configured like this:

.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('httpResponseInterceptor');
    $httpProvider.interceptors.push('httpTimeStampMarker');
    $httpProvider.defaults.useXDomain = true;
    $httpProvider.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    delete $httpProvider.defaults.headers.common['Content-Type, X-Requested-With'];
}])

      

This is how the actual $ http.post () is configured:

    // Set the headers
    var headers = {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT',
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': '*'
    };

    return $http({
            method: "POST",
            url: base_url,
            data: $.param(args),
            headers: headers
        })
        .success(function(data, status) {

        })
        .error(function(data, status) {

        });

      

This is the .htaccess of the server:

# Cors
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Access-Control-Allow-Origin, Access-Control-Allow-Methods"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

      

The pre-flight request goes fine:

**Request headers:**
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:access-control-allow-origin, accept, access-control-allow-methods, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:***
Origin:***
Referer:***
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36

**Response headers**
Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Access-Control-Allow-Origin, Access-Control-Allow-Methods
Access-Control-Allow-Methods:PUT, GET, POST, DELETE, OPTIONS
Access-Control-Allow-Origin:*
Allow:OPTIONS,GET,HEAD,POST
Connection:Keep-Alive
Content-Length:0
Content-Type:httpd/unix-directory
Date:Fri, 26 Dec 2014 07:12:24 GMT
Keep-Alive:timeout=5, max=100
Server:Apache/2.4.9 (Unix) PHP/5.6.2

      

However, the actual post request fails:

XMLHttpRequest cannot load http://***/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '***' is therefore not allowed access. The response had HTTP status code 404.

      

These are the request and response headers:

**Request headers**
    Accept:*
    Accept-Encoding:gzip, deflate
    Accept-Language:en-US,en;q=0.8
    Access-Control-Allow-Methods:POST, GET, OPTIONS, PUT
    Access-Control-Allow-Origin:*
    Connection:keep-alive
    Content-Length:130
    Content-Type:application/x-www-form-urlencoded
    Host:***
    Origin:http://***
    Referer:***
    User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36


**Response headers**
Connection:Keep-Alive
Content-Length:198
Content-Type:text/html; charset=iso-8859-1
Date:Fri, 26 Dec 2014 07:12:24 GMT
Keep-Alive:timeout=5, max=99
Server:Apache/2.4.9 (Unix) PHP/5.6.2

      

I am clearly missing the headers in the response from the post request.

However, the problem it doesn't work with works in the presale request. I tried to add some headers to the index.php of the rest of the server, but the request doesn't arrive there and gets stuck before (I'm assuming when the .htaccess is loaded).

What am I missing here?

+3


source to share


2 answers


After a few hours, I finally found it.

My .htaccess:

# Cors
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Access-Control-Allow-Origin"
Header always set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

      



@Alexey Rodin's hint was pretty much right. Instead of changing "add" to "install", it should be set to "always installed".

This site helped me:

As far as AngularJS is concerned, I can confirm that no other settings are needed for CORS to work. This way Angular $ http doesn't need to be changed with headers or so, the default settings should work with the .htaccess entries mentioned above.

+8


source


Try using set

instead add

on your .htaccess

Header set Access-Control-Allow-Origin "*"



More details here

+1


source







All Articles