CORS-Error / using hosted file with datatables?

Question

i want to read this txt-file using datatables.net https://www.rapidtech1898.com/aaadownload/arrays.txt

But when i want to use the file with the following files the output is not working i have this error in the chrome inspector: (datatables is not reading as it sould and the inspector shows me that)

(at first i had the txt-file locally and read that there are some problems with that using chrome with local file - but this is a "normal" http-link isn´t it? - why is this stil not working as expected?

I also tried to do the same thing locally before - but i get the same error:

I have an 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>

And this is the mainAJAX.js file:

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

Somebody told me - that if also the server is hosted on the same domain (like rapidtech1898.com) it would probably work. But is there no way to test such think locally before deploying this somewhere else?

thanatonian2311 · Accepted Answer · 2021-06-12 11:14:48Z

1

For reasons of security, that is how CORS works. You cannot request data from a different origin unless the server allows it. However, for the purpose of development, you can disable CORS in multiple ways. There is a nice article for it here. But my personal favourite is this solution (to use a proxy that doesn't bypasses 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));

answered Jun 12, 2021 at 11:14

thanatonian2311

3392 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Rapid1898 Over a year ago

Ok thanks. But why is this not working locally - then both infos are locally? Isn't that then the same origin?

thanatonian2311 Over a year ago

Can't tell what error message you got when you tried it locally. So not sure.

Rapid1898 Over a year ago

The same error - but only for localhost - see above

thanatonian2311 Over a year ago

What path did you provide for the local file in the ajax field?

thanatonian2311 Over a year ago

The first answer here will help you understand the "why" of it - stackoverflow.com/questions/19842314/…

|

Rapid1898 · Accepted Answer · 2021-06-13 14:47:45Z

0

I think i found the problem -

In the server-js i have to usse express.static for the data-folder:

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

And in the datafolder i have to put all files (index.html, mainAJAX.js and arrays.txt).

Then i can call the text-file in the mainAJAX.js like that:

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

answered Jun 13, 2021 at 14:47

Rapid1898

1,5593 gold badges19 silver badges48 bronze badges

Collectives™ on Stack Overflow

CORS-Error / using hosted file with datatables?

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related