I am quite a beginner with JavaScript and I am trying to write a script that checks whether a website, let's say returns 404 status code or 200, and depending on the result, I'll access it or not. I am doing this on front end side. I don't have a server side, as the website is a static one that does not use a database. I am doing this using XMLHttpRequest.

 url = $("#foo").attr("href")
    function UrlExists(ur)
    {
        var http = new XMLHttpRequest();
        http.open('GET', ur, true);
        http.setRequestHeader("Access-Control-Allow-Origin", "http, https");
        http.setRequestHeader("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTONS");
        http.setRequestHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization")
        http.send();
        console.log(http.status);
    }
    UrlExists(url)

The problem is when I run this script, the following Exception is being thrown:

Access to XMLHttpRequest at '' from origin 'null' 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.

From what I read so far, it is rather CORS issue than JavaScript and I could not find a solution so far.

Can anybody help me with this issue and explain me why? I have checked other questions on SO and so far, I did not find a working solution. I am open to other solution too if there are any. Thank you so much!

I much appreciate your time!

UPDATE 1: Unfortunately, I am still struggling with this issue. I've read a lot about CORS policy, the problem is that I can't get how I should I can safely allow headers to be sent through request from my server to another one. The resources are: an HTML page and some JS code in it. As I have mentioned above, I am trying to send a request from my site to another one to check the status of that website, and if 404 pops, I want to redirect my user.

I am quite a beginner with JavaScript and I am trying to write a script that checks whether a website, let's say https://example.comreturns 404 status code or 200, and depending on the result, I'll access it or not. I am doing this on front end side. I don't have a server side, as the website is a static one that does not use a database. I am doing this using XMLHttpRequest.

 url = $("#foo").attr("href")
    function UrlExists(ur)
    {
        var http = new XMLHttpRequest();
        http.open('GET', ur, true);
        http.setRequestHeader("Access-Control-Allow-Origin", "http, https");
        http.setRequestHeader("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTONS");
        http.setRequestHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization")
        http.send();
        console.log(http.status);
    }
    UrlExists(url)

The problem is when I run this script, the following Exception is being thrown:

Access to XMLHttpRequest at 'http://example.com' from origin 'null' 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.

From what I read so far, it is rather CORS issue than JavaScript and I could not find a solution so far.

Can anybody help me with this issue and explain me why? I have checked other questions on SO and so far, I did not find a working solution. I am open to other solution too if there are any. Thank you so much!

I much appreciate your time!

UPDATE 1: Unfortunately, I am still struggling with this issue. I've read a lot about CORS policy, the problem is that I can't get how I should I can safely allow headers to be sent through request from my server to another one. The resources are: an HTML page and some JS code in it. As I have mentioned above, I am trying to send a request from my site to another one to check the status of that website, and if 404 pops, I want to redirect my user.

• javascript
• xmlhttprequest
• cors
• access-control

• Hey, just curious, were you able to get it to work? Will fell happy to know that you could! – Rakesh Gupta Commented Jun 27, 2021 at 23:32
• Hey! So happy to hear from you! Unfortunately, after a while, I gave up to that idea. I am thinking of trying one more time with my head clear. It is more of a gap of knowledge here. I tried with .htaccess file, but I am not using Apache Server and PHP. I need to read more about nginx. But you helped me a lot to understand the issue! – geekt Commented Jul 3, 2021 at 11:01

2 Answers 2

You need to set the CORS header on your web server. It is disabled by default for security reasons.

For example, in Nginx, you may do

add_header Access-Control-Allow-Origin example.com;

In case you are using a hosting service that does not allow webserver config modification, you may add the required headers to .htaccess file in your as shown under. In other words, place it in the root of your project where you have your index.html. Also, change the permissions to 644.

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"

References:

https://stackoverflow.com/a/20082724/2777988

https://blog.container-solutions.com/a-guide-to-solving-those-mystifying-cors-issues

I'm using Flutter and Nodejs (in HEROKU), this worked for me:

FLUTTER:

//FLUTTER

...

    final headers = <String, String>{
      'Content-Type': 'application/json',
      "Access-Control-Allow-Origin": "*",
    };

  final resp = await http.post(//here we make the req

      Uri.parse(url), 
      body: convert.jsonEncode(body),
      headers: headers,
    );

///

SERVER NODEJS IN HEROKU:

///SERVER NODEJS IN HEROKU
const express = require('express');
const cors = require("cors"); //this is a library to config easily cors
const app = express();


app.use(express.json());
app.use(cors({ origin: true })); // enable origin cors

app.post('/',async(req,res)=>{
...

///

Then i solved mixed content (with heroku), and cors problem