AngularJS adding Headers in http.put request

Question

I am new to angularJs, right now I want to use $http.put to update an Json file at a remote repository.

but everytime I try, I get the following error

XMLHttpRequest cannot load http://blabla&action=update. 
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'localhost:9080' is therefore not allowed access.

So it doesn't work. now I did my part of search on Stack and google. a lot of people are saying I should add headers. I don't know how to add headers correctly and I have no idea how to verify if the headers are correctly added.

Can someone help me? The following is my code.

$http.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
$http.defaults.headers.post['Access-Control-Allow-Methods'] = 'GET, POST, DELETE, PUT';
$http.defaults.headers.post['Access-Control-Allow-Credential'] = 'true';
$scope.update = function(key,value){
    $scope.myData[key] = value;
    $http.put('http://blabla&action=update', $scope.myData)
    .success(function (data, status) {
        alert('success');
    })

the code above is still giving me the same error, from my research online, the headers are suppose to solve this problem... but it didn't. I don't know what I did wrong. thanks guys!

Mihail Stancescu · Accepted Answer · 2016-01-27 18:36:52Z

1

You can pass a config object to the $http.put method like this:

$http({
        method: 'PUT',
        url: 'http://blabla&action=update',
        data: $scope.myData,
        headers: {
            "Access-Control-Allow-Origin": "self",
            <other headers here>
        }
    })
    .success(function (data, status) {
    alert('success');
});

And you can verify the headers with the request within developer tools if you use Chrome or IE and FireBug if you use Firefox. More info on Angular Docs.

answered Jan 27, 2016 at 18:36

Mihail Stancescu

4,1681 gold badge18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Laughing Day Over a year ago

But if the call fails by the above error, I cannot see the headers in developer tools. Therefore I cannot know if the headers are correctly added

Fernker · Accepted Answer · 2016-01-27 18:39:43Z

0

Your main issue is that the headers need to be set on the server. Your error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:9080' is therefore not allowed access. is the key to all of this.

You are requesting from localhost:9080 to somewhere like foo.com/api. That endpoint needs to return an Access-Control-Allow-Origin: localhost:9080 header to your application.

answered Jan 27, 2016 at 18:39

Fernker

2,28820 silver badges32 bronze badges

4 Comments

Laughing Day Over a year ago

So I need to ask the server side to return that to me?

Fernker Over a year ago

Yes if you are able to. These headers are part of CORS (Cross Origin Resource Sharing) and it's a security feature. Basically an agreement between you and a backend server and that you both expect and allow each other to send and get data from each other.

Laughing Day Over a year ago

i will try that once that person get back from lunch

Fernker Over a year ago

You might have to add more CORS headers but this will be the first one. It really depends on what you are doing. But Chrome should continue to give you relevant error messages about what headers are missing.

Collectives™ on Stack Overflow

AngularJS adding Headers in http.put request

2 Answers 2

1 Comment

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Related