简体   繁体   English

如何使用JavaScript存储网页/网页中的数据?

[英]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. 我想使用JavaScript将页面Tableau Public Gallery feed以JSON格式本地存储。 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. 我也尝试过使用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. 是出于Tableau网站的限制,还是我做错了什么。

PS: I am trying to implement this in Angular 7 project. PS:我正在尝试在Angular 7项目中实现这一点。

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. 除非https://public.tableau.com/en-us/s/gallery/feed在响应中提供Access-Control-Allow-Origin ,否则您将无法从浏览器的其他域执行此操作。 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. 相反,我建议设置一个后端端点(也许通过NodeJS),该端点将调用此端点而不是前端,然后从代码中调用该端点。 In the back end you will not face the Access-Control-Allow-Origin error which is why I recommend that as your proxy. 在后端,您将不会遇到Access-Control-Allow-Origin错误,这就是为什么我建议您将其作为代理。

If you decide to use NodeJS as your backend you can do the following: 如果决定使用NodeJS作为后端,则可以执行以下操作:

Run npm install --save express to install Express for Node (A Node server framework) 运行npm install --save express以安装Express for Node(一个Node服务器框架)

Create a structure like so: 创建一个像这样的结构:

在此处输入图片说明

index.html 的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 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 然后运行node index.js来启动服务器

Go to localhost:8888 to see your page and if you check the console the data should be logged. 转到localhost:8888以查看您的页面,如果您检查控制台,则应记录数据。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM