Cross domain HTML parsing using AngularJS

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 Apr 25 '17 at 16:55 — lin, Apr 25 '17 at 16:55

lin · Accepted Answer · 2017-03-10T11:16:52.433

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 '17 at 11:16

answered Mar 10 '17 at 08:07

lin

17,956
4
59
83

I can't change server content i.e. http link, I need only content from that server link. – Geetanjali Jain Mar 10 '17 at 08:09
@Geetanjali Updated, no way to make it work without having CORS enabled. – lin Mar 10 '17 at 08:13
"JSONP needs a valid JSON body response " — It doesn't. It needs a JavaScript application, not JSON. – Quentin Mar 10 '17 at 09:38
@Quentin, yes. but the `$http` method `JSONP` also works with an JSON object as response payload. – lin Mar 10 '17 at 09:40
@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 ``. You have to feed JS into that, not JSON. http://stackoverflow.com/questions/19165925/jsonp-call-showing-uncaught-syntaxerror-unexpected-token – Quentin Mar 10 '17 at 09:42
@Quentin your are right, thx. https://plnkr.co/edit/3zM7wcm19Q8fbdc2dg7N?p=preview – lin Mar 10 '17 at 09:55
@Quentin that link which I am using is html not json – Geetanjali Jain Mar 10 '17 at 10:09
@Geetanjali — Yes. That is why trying to prase it as JSONP doesn't work. I was pointing out that Lin's suggestion to change it to JSON would fail and that you need JSONP in the response. – Quentin Mar 10 '17 at 10:11
@Quentin Yes, then what should I use to resolve this? and can you please tell me how my post can be duplicate if this belongs to html? – Geetanjali Jain Mar 10 '17 at 10:15
@Geetanjali for example: one of the solutions provided in my answer? – lin Mar 10 '17 at 10:16
@lin not found any solution – Geetanjali Jain Mar 10 '17 at 10:21
@lin I am not able to get content from html page from your given 3 solutions and getting error- Uncaught SyntaxError: Unexpected token – Geetanjali Jain Mar 10 '17 at 10:26
@Geetanjali seems like you didn't even try one of the solutions given. – lin Mar 10 '17 at 10:29
@lin I have tried and then respond you as my link content started from this that's why this error comes again – Geetanjali Jain Mar 10 '17 at 10:31
@Geetanjali please join me in chat http://chat.stackoverflow.com/rooms/137747/discussion-between-geetanjali-and-lin – lin Mar 10 '17 at 11:14
Can you suggests me secure way to get content from third party domain link? – Geetanjali Jain Mar 16 '17 at 05:59
@Geetanjali Use SSL ;) and you will be fine. – lin Mar 17 '17 at 12:37

score -2 · Answer 2 · answered Mar 10 '17 at 08:16

-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 '17 at 08:16

rselvaganesh

1,032
2
18
30

I have tried these also, but I got same error. – Geetanjali Jain Mar 10 '17 at 09:26

Cross domain HTML parsing using AngularJS

2 Answers2

Solution 1)

Solution 2)

Solution 3)