How to store a web page/ data from web page using JavaScript?

问题: I would like to store this page Tableau Public Gallery feed locally in a JSON format using JavaScript. I have looked for scripts and code snippets but I am unable to find a...

问题:

I would like to store this page Tableau Public Gallery feed locally in a JSON format using JavaScript. I have looked for scripts and code snippets but I am unable to find anything helpful since every time I run the code I get the same error.

Access to XMLHttpRequest at 'https://public.tableau.com/en-us/s/gallery/feed' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Below is the code I am using currently.

  $.ajax({

     url:"https://public.tableau.com/en-us/s/gallery/feed",
     method: 'GET',
     dataType:'JSON',
     headers: {
         'Access-Control-Allow-Origin': '*'
     },
     success: function(response) {
         console.log(response);
     }
});

Also I have tried using POSTMAN. It also gives the error that Could not get any response. Is it because of the restriction from the Tableau website or am I doing something wrong.

PS: I am trying to implement this in Angular 7 project.


回答1:

Unless the https://public.tableau.com/en-us/s/gallery/feed provides a Access-Control-Allow-Origin in the response, you will not be able to do this from a different domain on the browser. What I'd recommend instead is to set up a backend end point (maybe through NodeJS) which calls this instead of the front end and then call that endpoint from your code. In the back end you will not face the Access-Control-Allow-Origin error which is why I recommend that as your proxy.

If you decide to use NodeJS as your backend you can do the following:

Run npm install --save express to install Express for Node (A Node server framework)

Create a structure like so:

enter image description here

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <script>
        $.ajax({
            url: "/api/tableau-gallery-feed",
            method: 'GET',
            success: function (response) {
                console.log(response);
            }
        });
    </script>
</body>
</html>

index.js

var express = require('express')
var https = require('https')
var app = express()

app.use(express.static('public'))

app.get('/api/tableau-gallery-feed', function (req, res) {
    https.get('https://public.tableau.com/en-us/s/gallery/feed', function (data) {
        data.setEncoding('utf8')
        let rawData = ''
        data.on('data', function (chunk) {
            rawData += chunk
        })
        data.on('end', function () {
            res.end(rawData)
        });
    })
})

app.listen(8888, () => console.log('Server started.'))

Then run node index.js to start your server

Go to localhost:8888 to see your page and if you check the console the data should be logged.

  • 发表于 2019-03-14 07:48
  • 阅读 ( 222 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除