CORS 错误/使用带有数据表的托管文件？答案

【问题标题】：CORS-Error / using hosted file with datatables?CORS 错误/使用带有数据表的托管文件？
【发布时间】：2021-08-28 23:15:01
【问题描述】：

我想使用 datatables.net 阅读这个 txt 文件 https://www.rapidtech1898.com/aaadownload/arrays.txt

但是当我想将文件与以下文件一起使用时，输出不起作用我在 chrome 检查器中出现此错误：（数据表没有按预期读取，检查员向我展示了这一点）

（起初我在本地有 txt 文件，并读到使用带有本地文件的 chrome 存在一些问题 - 但这是一个“正常”的 http 链接，不是吗？ - 为什么这仍然不起作用符合预期？

我之前也尝试在本地做同样的事情 - 但我得到了同样的错误：

我有一个 index.html：

<!DOCTYPE html>
<html lang="en">
    <head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">     
    </head>
    <body>
        <div class="container py-5">
            <header class="text-center text-white">
                <h1 class="display-4">Levermann Scores</h1>
            </header>
            <div class="row py-5">
            <div class="col-lg-10 mx-auto">
                <div class="card rounded shadow border-0">
                <div class="card-body p-5 bg-white rounded">
                    <div class="table-responsive">

                      <table id="example" class="display" style="width:100%">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Position</th>
                                <th>Office</th>
                                <th>Extn.</th>
                                <th>Start date</th>
                                <th>Salary</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>Name</th>
                                <th>Position</th>
                                <th>Office</th>
                                <th>Extn.</th>
                                <th>Start date</th>
                                <th>Salary</th>
                            </tr>
                        </tfoot>
                      </table>   

                    </div>
                </div>
                </div>
            </div>
            </div>
        </div>
        <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="mainAJAX.js"></script>
    </body>
</html>

这是 mainAJAX.js 文件：

$(document).ready(function() {
  $('#example').DataTable( {
      // "ajax": "http://localhost:2121/arrays.txt"
      "ajax": "https://www.rapidtech1898.com/aaadownload/arrays.txt"
  } );
} );

有人告诉我 - 如果服务器也托管在同一个域（如 rapidtech1898.com）上，它可能会工作。但是，在将其部署到其他地方之前，有没有办法在本地测试这种想法？

【问题讨论】：

标签： node.js express web

【解决方案1】：

出于安全原因，这就是 CORS 的工作方式。除非服务器允许，否则您不能请求来自不同来源的数据。但是，出于开发目的，您可以通过多种方式禁用 CORS。有一篇很好的文章here。但我个人最喜欢的是这个解决方案（使用不绕过 CORS 的代理）：

fetch('https://cors-anywhere.herokuapp.com/https://www.rapidtech1898.com/aaadownload/arrays.txt', {
    method: "GET",
    headers: {
      "Content-type": "application/json;charset=UTF-8",
      "x-requested-with": "localhost:3000"
    }
  }).then(response => response.json())
  .then(json => console.log(json))
  .catch(err => console.log(err));

【讨论】：

好的，谢谢。但是为什么这在本地不起作用 - 那么这两个信息都是本地的？那不就是同源吗？
无法判断您在本地尝试时收到的错误消息。所以不确定。
同样的错误 - 但仅适用于本地主机 - 见上文
你在ajax字段中为本地文件提供了什么路径？
这里的第一个答案会帮助你理解它的“为什么”——stackoverflow.com/questions/19842314/…

【解决方案2】：

我想我找到了问题-

在 server-js 中，我必须为数据文件夹使用 express.static：

const express = require("express");
const app = express();
app.use(express.static('data'))
app.listen(2121, () => {
  console.log("Server is running on port 2121...");
});

在数据文件夹中，我必须放入所有文件（index.html、mainAJAX.js 和 arrays.txt）。

然后我可以像这样调用 mainAJAX.js 中的文本文件：

$(document).ready(function() {
  $('#example').DataTable( {
      "ajax": "arrays.txt"
  } );
} );

【讨论】：