No 'Access-Control-Allow-Origin' when trying get data of Text File from url

Question

I have the website with analytics of main site index. Earlier I had it in PHP on https://www.status.webcoder.sk but now I'm trying to do it in nodejs on https://www.webcoderstatus.herokuapp.com but I have 1 problem.

Get data from text file from url is working with no problems with php but when I'm trying to do it with JavaScript there is problem with CORS policy.

My code is:

        function getText(){
            var request = new XMLHttpRequest();
            request.open('GET', 'https://www.webcoder.sk/config/devices.txt', true);
            request.send(null);
            request.onreadystatechange = function () {
                if (request.readyState === 4 && request.status === 200) {
                    var type = request.getResponseHeader('Content-Type');
                    if (type.indexOf("text") !== 1) {
                        return request.responseText;
                    }
                }
            }
        }
        $(document).ready(function() {
            var devices = getText();
            console.log(devices);
        });

This is the error message: (index):1 Access to XMLHttpRequest at 'https://www.webcoder.sk/config/devices.txt' from origin 'https://webcoderstatus.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

You have to add CORS policies to your backend. You can add it manually on the headers or, since you are using nodejs, you can install the cors module and just put app.use(cors()) on your server. — danibrum, Aug 12 '19 at 17:23
Yes, if you don't have control over https://www.webcoder.sk back-end, you should make the call from your backend. This avoids all CORS issues. — Matt Kuhns, Aug 12 '19 at 17:30
Possible duplicate of [How does Access-Control-Allow-Origin header work?](https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work) — FZs, Aug 12 '19 at 21:25
@FZs Similliar but I was looking for a lot of articles like this and noone helped me so I had to make this and describe it thoroughly. — Gougerik, Aug 13 '19 at 08:49

Ramaraja · Accepted Answer · 2019-08-12T21:16:58.247

0

Problem

This error is because you have your backend and frontend at different places(a.k.a origins). Your backend is hosted at https://www.webcoder.sk and your frontend is at https://webcoderstatus.herokuapp.com. For security purposes browsers prevent access of data across different origins and by default implement same-origin policy policy.

Solution

What you need to do is enable Cross Origin Resource Sharing, which is nothing but to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin.

If you have control over the backend node.js service hosted at https://www.webcoder.sk then here's a simple way to add CORS support.

First add the cors npm package to your node.js backend,

npm install --save cors

Then add the middleware to you starter file like this,

const express = require('express');
const cors = require('cors');

const app = express();
app.use(cors());

/*The rest of your routes*/

edited Aug 12 '19 at 21:16

answered Aug 12 '19 at 21:04

Ramaraja

2,526
16
21

Do I have add this code to app.js and also index.js or only to one of that files? – Gougerik Aug 12 '19 at 21:15
@WebCoder Only one of them. Add it to the file where you import and use the ```express``` module, the base/starter/entry file – Ramaraja Aug 12 '19 at 21:16
I added to app.js and application started correctly but with same error message of cors – Gougerik Aug 13 '19 at 08:44
And no, my backend is not hosted at webcoder.sk, there is only text file I wanna read. Nodejs of webcoderstatus.herokuapp.com is hosted at herokuapp.com – Gougerik Aug 13 '19 at 08:47

No 'Access-Control-Allow-Origin' when trying get data of Text File from url

1 Answers1