(CORS) - Cross-Origin Resource Sharing connection issue

Question

I am currently in the process of creating a browser extension for a university project. However as I was writing down the extension I hit a really weird problem. To understand fully my situation I will need to describe it in debt from where my issue comes.

The extension that I am currently working on has to have a feature that checks if the browser can connect to the internet or not. That is why I decided to create a very simple AJAX request function and depending on the result returned by this function to determine if the user has internet connection or not.

That is why I created this very simple AJAX function that you can see bellow this line.

 $.ajax({ url: "https://enable-cors.org/index.html", crossDomain: true, }).done(function() { console.log("The link is active"); }).fail(function() { console.log("Please try again later."); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

So far, as long as I understand what it is doing, it is working fine. For example, if you run the function as it is, it will succsesfully connect to the url and process with the ".done(function..." if you change the url to "index273.index" a file which does not exist it will process with the ".fail(function...". I was happy with the result until I decided to test it further more and unpluged my cable out of my computer. Then when I launched the extension it returned the last result from when the browser had connection with the internet. My explanation why the function is doing this is because it is caching the url result and if it cannot connect it gives the last cached value. My next step to try and solve this was to add "cache: false" after the "crossDomain: true" property but after that when I launch the extension it gives the following error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://enable-cors.org/index?_=1538599523573 . (Reason: CORS header 'Access-Control-Allow-Origin' missing).

If someone can help me out sorting this problem I would be extremely grateful. I would want to apologise in advance for my English but this is not my native language.

PS: I am trying to implement this function in the popup menu, not into the "content_scripts" category. I am currently testing this under Firefox v62.0.3 (the latest available version when I write this post).

Best regards, George

Answer 1

也许不用调用URL来检查Internet连接是否可用，而可以尝试使用Navigator对象： https : //developer.mozilla.org/en-US/docs/Web/API/Navigator/connection

Answer 2

unless the remote server allowed origin (allowed cors) then you can't access it because it's a security issue.

But there are other things you can do:

1. You can load image and fire event when an image is loaded
2. You can access remote JSON via JSONP response

but you can't access other pages because (unless that server allows it) it's a security issue.