如何使用 JavaScript 从网页存储网页/数据？答案

【问题标题】：How to store a web page/ data from web page using JavaScript?如何使用 JavaScript 从网页存储网页/数据？
【发布时间】：2019-03-13 05:44:34
【问题描述】：

我想使用 JavaScript 以 JSON 格式在本地存储此页面 Tableau Public Gallery feed。我一直在寻找脚本和代码 sn-ps 但我找不到任何有用的东西，因为每次运行代码时都会遇到相同的错误。

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.

下面是我目前正在使用的代码。

  $.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);
     }
});

我也尝试过使用 POSTMAN。它还给出了无法得到任何响应的错误。是因为 Tableau 网站的限制，还是我做错了什么。

PS：我正在尝试在 Angular 7 项目中实现这一点。

【问题讨论】：

服务器需要启用 CORS 才能使上述代码正常工作。我相信他们没有这样做。
另外，在 Angular 7 项目中使用 $.ajax 也不是一个好主意。您可能需要考虑提供可以为您拨打电话的服务 :) angular.io/tutorial/toh-pt4 这可能会对您有所帮助。

标签： javascript json angular

【解决方案1】：

除非https://public.tableau.com/en-us/s/gallery/feed 在响应中提供Access-Control-Allow-Origin，否则您将无法从浏览器上的其他域执行此操作。我建议改为设置一个后端端点（可能通过 NodeJS）来调用它而不是前端，然后从您的代码中调用该端点。在后端，您不会遇到 Access-Control-Allow-Origin 错误，这就是我推荐它作为您的代理的原因。

如果您决定使用 NodeJS 作为后端，您可以执行以下操作：

运行npm install --save express 安装 Express for Node（一个 Node 服务器框架）

像这样创建一个结构：

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.'))

然后运行node index.js 来启动你的服务器

转到 localhost:8888 以查看您的页面，如果您检查控制台，则应记录数据。

【讨论】：

你能分享一个同样的例子吗？
你是否使用 NodeJS 作为你的后端@Bhartendu？
我已经安装了 node 和 npm，但除了 angular-cli 的安装和依赖项之外，我没有将它们用于其他任何事情
您不能通过 JS 直接从客户端执行此操作，您需要构建服务器端（如@Talha 提到的节点）实用程序，该实用程序将接受 URL 数据并将结果发送回您的 Angular 7 应用程序。另外，我不确定这一点，但如果没有任何效果，我也可以考虑抓取数据。如果您将使用节点作为后端，那么github.com/cheeriojs/cheerio (Cheerio) 将是一个很大的帮助。
@Bhartendu 我刚刚用一个非常简单的 Node Express 服务器示例更新了答案。