Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 438

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 438

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 764

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 438

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 438

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 764

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 580

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 438

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
Resolve the Error “cross-origin request blocked: the same origin policy disallows reading the remote resource error” - TutoPal

Resolve the Error “cross-origin request blocked: the same origin policy disallows reading the remote resource error”

JavaScript has become a handy programming language that programmers frequently used to create interactive applications and web pages. Programmers and developers used this programming language all over the world. JavaScript is also popular because of its libraries that add up to the convenience for programmers. jQuery is the most used JavaScript library to simplify HTML document traversal, manipulation, animation, event handling, and Ajax. jQuery is an open-source and free library that is small, fast, and rich in features library. While Ajax stands for Asynchronous JavaScript and XML, which is used for creating faster and better web applications. Programmers use Ajax to use the object to communicate with the server.

When you are working with Ajax, you may end up with the error “cross-origin request blocked: the same origin policy disallows reading the remote resource error”. You don’t need to worry when you get this error warning as there are always a few fixes to tackle it. Go ahead with the post to find the best solutions to make the error go away. But first, let’s check out how the error appears

How the error shows up

When you try to use a website to take an Idiom as input to get meaning and example from the Oxford dictionary, you get the error warning. Check out how you use the URL

You try to send a request to the below URL

http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=[idiom]

In the case of the Idiom ‘not go far’, you send a request to the following

http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=not+go+far

And the page you want to be redirected to:

http://www.oxfordlearnersdictionaries.com/definition/english/far_1#far_1__192

You use a code script to make it work. This is the program script you use:

<input id="idiom" type="text" name="" value="" placeholder="Enter your idiom here">
<br>
<button id="submit" type="">Submit</button>
<script type="text/javascript">
$(document).ready(function(){
    $("#submit").bind('click',function(){
        var idiom=$("#idiom").val();
        $.ajax({
            type: "GET",
            url: 'http://www.oxfordlearnersdictionaries.com/search/english/direct/',
            data:{q:idiom},
            async:true,
            crossDomain:true,
            success: function(data, status, xhr) {
                alert(xhr.getResponseHeader('Location'));
            }
        });
        
    });
});
</script>

As soon as you execute it, you land up in the error warning. You get the following error message:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=by+far. This can be fixed by moving the resource to the same domain or enabling CORS.

Ways To Fix the Error “cross – origin request blocked: the same origin policy disallows reading the remote resource error”

We come up with a few effective options to make the error go away.

Option 1

To solve the error, you need to make sure you are permitted to set a header domain oxfordlearnersdictionaries.com via CORS.

Options 2 

Another way to get the issue fixed, you need to add a line at the top of the file calling via AJAX. Have a look at the line you need to add at the top:

header("Access-Control-Allow-Origin: *");

Option 3

It is to note that you can’t obtain data with no JSONP from the third-party site. In order to fetch data like CURL or file_get_contents(), PHP function is used. You need to use the PHP url along with the ajax code

<input id="idiom" type="text" name="" value="" placeholder="Enter your idiom here">
<br>
<button id="submit" type="">Submit</button>
<script type="text/javascript">
$(document).ready(function(){
    $("#submit").bind('click',function(){
        var idiom=$("#idiom").val();
        $.ajax({
            type: "GET",
            url: 'get_data.php',
            data:{q:idiom},
            async:true,
            crossDomain:true,
            success: function(data, status, xhr) {
                alert(xhr.getResponseHeader('Location'));
            }
        });

    });
});
</script>

To create PHP file get_data.php:

<?php
  echo file_get_contents("http://www.oxfordlearnersdictionaries.com/search/english/direct/");
?>

Option 4

SON with padding or JSONP is a well-known communication tactic is in JavaScript programs that you execute in the web browser to request a server in another domain that is not allowed by web browsers. In order to make JSONP work, a server needs to reply to the result formatted by JSON. While JSON-formatted result doesn’t work with JSONP. Use the below to solve the issue

$.ajax({
  type: "GET",
  url: 'http://www.oxfordlearnersdictionaries.com/search/english/direct/',
  data:{q:idiom},
  async:true,
  dataType : 'jsonp',   //you may use jsonp for cross origin request
  crossDomain:true,
  success: function(data, status, xhr) {
    alert(xhr.getResponseHeader('Location'));
  }
});

Conclusion

And that’s how you can solve the error “cross – origin request blocked: the same origin policy disallows reading the remote resource error”. I hope you enjoyed the post.

I wish you luck!

Leave a Reply

Your email address will not be published. Required fields are marked *