CODEWITHSUNDEEP
javascriptxmlhttprequestcorsaccess-control
geekt
geekt

Reputation: 2646

CORS: response to preflight request doesn't pass access control check - How to solve it on localhost?

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.

Upvotes: 8

Views: 150968

Answers (2)

Ricardo Araque
Ricardo Araque

Reputation: 81

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

Upvotes: 2

Rakesh Gupta
Rakesh Gupta

Reputation: 3770

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

Upvotes: 7

Related Questions