JavaScript has hindered cross-origin response due to Cross-Origin Read Blocking (CORB)

I am having trouble retrieving JSON responses from an API. The error message "Cross-Origin Read Blocking (CORB) blocked cross-origin response" keeps popping up. I've tried searching online for a solution to this problem, but so far, I haven't been successful.

The API is supposed to provide a generated session.

When I check the headers, I can see that there are multiple headers attached to the request.

Interestingly, if I directly paste the URL into my web browser, I am able to get the JSON response with the values. However, when I use the URL in an ajax function, I am denied access.

    jQuery.ajax({
        type: 'GET',
        crossOrigin: true,
        url: "https://apitest.mobzgo.co.za/getSession?username=********&passingword=*****",
        dataType: "jsonp",
        contentType: "jsonp;",
        success: function (response) {
          alert(JSON.stringify(response));
        },
        error: function (jqXHR, exception, errorThrown) {
            var msg = '';
            if (jqXHR.status === 0) {
                msg = 'Not connect.\n Verify Network.';
            } else if (jqXHR.status === 404) {
                msg = 'Requested page not found. [404]';
            } else if (jqXHR.status === 500) {
                msg = 'Internal Server Error [500].';
            } else if (exception === 'parsererror') {
                msg = errorThrown;
            } else if (exception === 'timeout') {
                msg = 'Time out error.';
            } else if (exception === 'abort') {
                msg = 'Ajax request aborted.';
            } else {
                msg = 'Uncaught Error.\n' + jqXHR.responseText;
            }
            alert(msg);
        } 
    });

Answer №1

Errors known as CORB occur when you attempt to handle data from a different source as if it were a different type of data.

For example,

<img src="http://example.com/foo.html">
- an HTML document being treated as an image.

In this scenario, specifying dataType: "jsonp", means you are interpreting the URL as JavaScript (since JSONP is essentially a Javascript format). However, since it's not JavaScript, instead of attempting to execute it and encountering errors, it throws an exception upon recognizing that it's not JS.


As a side note: contentType: "jsonp;", — JSONP is not a content type, and since you are sending a GET request, there is no request body to define its type. Furthermore, JSONP requests cannot specify the content type. This approach is incorrect and redundant in numerous ways.


It's important to acknowledge that JSONP is considered to be problematic. It has limitations and security risks. With the availability of CORS in modern APIs, supporting cross-origin requests using JSONP is unnecessary. CORS offers a much more secure and robust solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

`Zooming and scrolling feature within a masked image`

I'm struggling to achieve a scrolling zoom effect similar to the website mentioned below, but I can't seem to get it to fully zoom. Additionally, when I try to zoom in on a clipped shape or text while scrolling, the entire div ends up scrolling ...

Identifying an Object by Clicking with the Mouse in three.js

After successfully loading 3 external models into my scene using the json loader, I am now trying to retrieve the name of the clicked model/object. Below is the code snippet that I used to load the models: var object_material = new THREE.MeshBasicMateria ...

Modify the background color based on the length of the input in Vue

Can you change the background color of the initial input field to green if the value of the Fullname input field is greater than 3 characters? See below for the code: <div id="app"> <input type="text" v-model="fullname" placeholder="Enter Full ...

Ways to display or conceal various divs by employing an if/else statement?

I am aiming to conditionally display various divs based on certain criteria: Show the "x" div if it's not already visible Display the "y" div only if the "x" div is already being displayed Show the "z" div only if both the "x" and "y" divs are alrea ...

Instructions on invoking a function from one controller within another controller

Is it possible to invoke a function from one controller in another controller? I attempted the following but encountered failure: <div ng-app="MyApp"> <div ng-controller="Ctrl1"> <button ng-click="func1()">func1</button> ...

Getting the iframe onload event in an ASP.NET application

I have integrated ReportViewer to display SSRS reports on my .aspx page. However, since the ReportViewer is rendered as an iframe in the browser, I am looking for a way to trigger a JavaScript function every time the iframe loads. Using window.onload w ...

Understanding variable scopes in the success callback function of a JQuery post request

I am encountering an issue with passing the AJAX success array from one function to another. It seems that I am unable to transfer the data stored in a variable within the success section of the AJAX function to the parent function for return. I tried to ...

What is the best way to spin a div HTML layer?

I'm trying to modify a Div layer that looks like this: ... <style type="text/css"> <!-- #newImg { position:absolute; left:180px; top:99px; width:704px; height:387px; z-index:1; background-image:url(../Pictures/rep ...

Changing letter cases in a textbox using Javascript

I have a challenge to create a code that can switch the case of text entered by the user. Here is what I currently have: var num; function toggleTextCase(str) { return str.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase( ...

Is React the best solution for managing a lengthy list that requires constant data updates?

In order to display a long list with over 2000 entries that changes dynamically, I am utilizing react redux. Each second, at least one new row is added to the list data. My current approach involves mapping through the list data in the render method like t ...

Ways to retain specific div elements following the execution of .html(data) command

Imagine I have a div structured in this way: <div id = "foo" style = "display: grid"> <div id = "bar"> keep me! </div> </div> If I use JQuery's .html(data) method like shown below: $('#foo').html(data); when m ...

The use of p-message in Angular's PrimeNg library is not permitted

Hey there, I'm having a bit of trouble with the p-message Tag in Angular. I believe I've imported it correctly as shown below. import { MessageModule } from 'primeng/message'; imports: [ .... MessageModule, ... In the ...

Applying a translucent layer of color to a jpeg image to create a subtle background effect

I am attempting to create a semi-transparent, solid background color on top of an <img> tag, while still showing the original image underneath at the same ratio and size. Below is a snippet of the code I am working with (let me know if you need more ...

Ensuring the Accuracy of POST Parameters Using Express-Validator

I've been working on adding parameter validation to my Node/Express API by utilizing express-validator. However, I encountered a situation where even though I sent a POST request with a missing "name" field using the curl command curl -X POST -d "foo= ...

Assinging a value to a JavaScript variable using C# Jint

Looking to set a value to a JavaScript variable In this scenario, I need to retrieve a value. 1. First, I create a basic function Engine js = new Engine(); js.SetValue("get_s_width",new Action<int>(get_s_width)); public void get_s_width(int i) ...

Utilizing the v-for directive to loop through JSON data with unique IDs and linking them to Input components in PrimeVue

In my database, I have a collection of products with a column named attributes that stores property/value pairs in JSON format. Each product can have unique attributes. For instance, one product's attributes could be: #product1 attributes { color: & ...

parsing a TypeScript query

Is there a simpler way to convert a query string into an object while preserving the respective data types? Let me provide some context: I utilize a table from an external service that generates filters as I add them. The challenge arises when I need to en ...

Adjust the size of child divs in relation to their parent divs using jQuery

I am working with 4 divs and trying to adjust the size of the inner divs in relation to the parent divs dynamically. I have added a .top class, but I'm unsure if it is necessary or beneficial. Here is my fiddle for testing purposes: http://jsfiddle.n ...

Troubleshooting Images in a React Application Integrated with WordPress API

I am struggling to understand why this GET request is consistently returning a 404 error. I have thoroughly tested the URL using Postman and everything seems to be in working order for the title and excerpt, but the images are causing some issues. Does a ...

The construction of the Gatsby site encountered a major obstacle

I've been facing challenges while trying to build my Gatsby site. Whenever I run 'gatsby develop' in the console, my app starts without any issues. However, when I attempt to build it, I encounter errors like the ones shown below. Does anyon ...