Cross domain HTML parsing using AngularJS [duplicate]

Question

We are working on java project in which backend is java + spring and fronted is angular 2 + HTML.

I want to do cross domain html parsing but we don't have permission to access external links on server side as we have some security issues for outsite domains, so we have to get the DOM content of link on client side using jquery.

I have tried these:

var url = "http://xyz.aspx";

$http({
    method: 'JSONP',
    url: url,
    params: {
        format: 'jsonp',
        json_callback: 'JSON_CALLBACK'
    }
}).
success(function(response) {
    $scope.test = response;
}).
error(function(status) {
    //your code when fails
});

The external link which I need to parse contains many href links. I also need to parse content of those links.

Have tried above mentioned code:

getting error in console - Uncaught SyntaxError: Unexpected token < on xyz.aspx page

What will be best solution to get content of the pages and pass to server side for parsing?

Please bring some feedback, does my answer work for you?

lin
– lin

2017-04-25 16:55:26 +00:00
Commented Apr 25, 2017 at 16:55 — lin
– lin, Commented Apr 25, 2017 at 16:55

lin · Accepted Answer · 2017-03-10 11:16:52Z

0

Solution 1)

getting error in console - Uncaught SyntaxError: Unexpected token < on xyz.aspx page

This means that the server callback isn't a valid JavaScript application. Please ensure your server returns a valid JavaScript application. In that way this error will go away. JSONP needs a valid JavaScript application response to make it work. For example this is how a JSONP callback should look like:

jsonCallback(
    {
        sites: [
            {
                siteName: "Test"
            }
        ]
    }
);

Solution 2)

If your server side does not return a JSON Object try to use a GET request and enable CORS.

$http({
    method: 'GET',
    url: "http://xyz.aspx",
}).success(function(response) {
    $scope.test = response.data;
}).error(function(status) {
    //your code when fails
});

Solution 3)

If you are still be unable to add CORS to your backend you could create an PROXY application yourself. This for example is an public CORS Proxy https://crossorigin.me/. Adding an example on how to create a proxy service would be to much. Please research by yourself. There are a lot of examples in the web.

edited Mar 10, 2017 at 11:16

answered Mar 10, 2017 at 8:07

lin

18.5k4 gold badges66 silver badges88 bronze badges

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

17 Comments

Geetanjali Jain Over a year ago

I can't change server content i.e. http link, I need only content from that server link.

lin Over a year ago

@Geetanjali Updated, no way to make it work without having CORS enabled.

Quentin Over a year ago

"JSONP needs a valid JSON body response " — It doesn't. It needs a JavaScript application, not JSON.

lin Over a year ago

@Quentin, yes. but the $http method JSONP also works with an JSON object as response payload.

Quentin Over a year ago

@lin — It shouldn't do. If you give it JSON in the response, it will generally throw an error when it hits the first :. JSONP works by generating <script src="path/to/jsonp"></script>. You have to feed JS into that, not JSON. stackoverflow.com/questions/19165925/…

|

rselvaganesh · Accepted Answer · 2017-03-10 08:16:45Z

-2

See ng.$http. Your URL is missing the callback parameter,instead of giving like

 json_callback: 'JSON_CALLBACK'

Try below way

$http({
    method: 'jsonp',
    url: 'http://xyz.aspx?callback=JSON_CALLBACK',
    params: { name: 'xyz' }
}).success(function(data, status , header, config) {
    console.log('success');
}).error(function(data, status , header, config) {
    console.log('error');
});

answered Mar 10, 2017 at 8:16

rselvaganesh

1,1222 gold badges18 silver badges31 bronze badges

1 Comment

Geetanjali Jain Over a year ago

I have tried these also, but I got same error.

Collectives™ on Stack Overflow

Cross domain HTML parsing using AngularJS [duplicate]

2 Answers 2

Solution 1)

Solution 2)

Solution 3)

17 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Solution 1)

Solution 2)

Solution 3)

17 Comments

1 Comment

Linked

Related