How to resolve the " access-control-allow-origin " error in angularjs?

Question

3.00/5 (2 votes)

See more:

I came across an error on getting the url meta data by using Angular JS with ajax.

The error statement is:

XMLHttpRequest cannot load http://www.esample.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

JavaScript

var app = angular.module('myapp', []);
  app.controller('ctrl',
  function ($scope,$http){      
      $http.get('http://example.in/')
        .success(
            function(data,status,headers,config){
            var details = [
              {title:$(data).filter('title'),
              description:$(data).filter('meta[name=description]').attr("content"),
              keywords:$(data).filter('meta[name=keywords]').attr("content"),
              image:$(data).filter('meta[name=og:image]').attr("content")},
            ];
            $scope.details;  
        })
        .error(function (data, status, headers, config) {
            $scope.error = " - Something went wrong with your code....";
        }); 
});

What I have tried:

JavaScript

$http.get('http://example.in/', function (res) {
              res.header("Access-Control-Allow-Origin", "*");
              res.header("Access-Control-Allow-Headers", "X-Requested-With");
})...

Reference: access to specific domain only.

Posted 8-Feb-17 21:42pm

cgprakash

Updated 9-Feb-17 0:33am

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

F-ES Sitecore · Answer 1 · 2017-02-08T21:54:00

Solution 1

The site you are trying to access doesn't want you accessing it from your own javascript, there is nothing you can do about this.

Posted 8-Feb-17 21:54pm

F-ES Sitecore

Richard Deeming · Answer 2 · 2017-02-09T00:33:00

The code from the blog post you linked to needs to be used on the remote server being requested, not in the client making the request.

The cross-origin restrictions are there to prevent malicious code from making unauthorised requests to remote resource. If it was possible for the client to override the restrictions, then they wouldn't provide any protection, and there would be no point in having them.

For example, imagine you've logged in to your bank's site. They set some cookies to keep you logged in. Without the restrictions, any other site you visit could make a cross-origin request to your bank's site to transfer money from your account to a hacker's account. Because the request was sent from your browser, it would include the cookies that keep you logged in, and the request would succeed.

The solution is to create a "proxy" service on your server. Requests made from the server will not include or have access to any of the client's cookies for the remote site, so the cross-origin restrictions do not apply.

Your script would then call the proxy service on your site, which would not be a cross-origin request. The proxy service would make the network request, and return the relevant results to the page.

cgprakash · Answer 3 · 2017-02-08T22:27:00

Solution 2

But i have tried on my own web page its not restricted to get those details when I tried the same with php I got those details by curl functions.

Posted 8-Feb-17 22:27pm

cgprakash

Comments

F-ES Sitecore 9-Feb-17 4:46am

Your own page isn't restricted as you have not put restrictions in place, whereas this site has, and you can use php and curl as those are not ajax calls and this is an issue with ajax security.

Richard Deeming 9-Feb-17 6:23am

If you want to ask a question or add a comment, use the "Have a Question or Comment?" button under the solution you're replying to.

Do not post your comment as a new "solution".