[javascript] Cross-Origin Read Blocking (CORB)

I have called third party API using Jquery AJAX. I am getting following error in console:

Cross-Origin Read Blocking (CORB) blocked cross-origin response MY URL with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

I have used following code for Ajax call :

  type: 'GET',
  url: My Url,
  contentType: 'application/json',
  xhrFields: {
    withCredentials: false
  headers: {
    'Access-Control-Allow-Credentials' : true,
  success: function(data) {
  error: function(error) {

When I checked in Fiddler, I have got the data in response but not in Ajax success method.

Please help me out.

This question is related to javascript jquery ajax cors cross-origin-read-blocking

The answer is


You are making a JSONP request, but the server is responding with JSON.

The browser is refusing to try to treat the JSON as JSONP because it would be a security risk. (If the browser did try to treat the JSON as JSONP then it would, at best, fail).

See this question for more details on what JSONP is. Note that is a nasty hack to work around the Same Origin Policy that was used before CORS was available. CORS is a much cleaner, safer, and more powerful solution to the problem.

It looks like you are trying to make a cross-origin request and are throwing everything you can think of at it in one massive pile of conflicting instructions.

You need to understand how the Same Origin policy works.

See this question for an in-depth guide.

Now a few notes about your code:

contentType: 'application/json',
  • This is ignored when you use JSONP
  • You are making a GET request. There is no request body to describe the type of.
  • This will make a cross-origin request non-simple, meaning that as well as basic CORS permissions, you also need to deal with a pre-flight.

Remove that.

  • The server is not responding with JSONP.

Remove this. (You could make the server respond with JSONP instead, but CORS is better).


This is not an option supported by jQuery.ajax. Remove this.

xhrFields: { withCredentials: false },

This is the default. Unless you are setting it to true with ajaxSetup, remove this.

  headers: {
    'Access-Control-Allow-Credentials' : true,
  • These are response headers. They belong on the response, not the request.
  • This will make a cross-origin request non-simple, meaning that as well as basic CORS permissions, you also need to deal with a pre-flight.

In most cases, the blocked response should not affect the web page's behavior and the CORB error message can be safely ignored. For example, the warning may occur in cases when the body of the blocked response was empty already, or when the response was going to be delivered to a context that can't handle it (e.g., a HTML document such as a 404 error page being delivered to an tag).


I had to clean my browser's cache, I was reading in this link, that, if the request get a empty response, we get this warning error. I was getting some CORS on my request, and so the response of this request got empty, All I had to do was clear the browser's cache, and the CORS got away. I was receiving CORS because the chrome had saved the PORT number on the cache, The server would just accept localhost:3010 and I was doing localhost:3002, because of the cache.

Return response with header 'Access-Control-Allow-Origin:*' Check below code for the Php server response.

<?php header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
echo json_encode($phparray); 

You have to add CORS on the server side:

If you are using nodeJS then:

First you need to install cors by using below command :

npm install cors --save

Now add the following code to your app starting file like ( app.js or server.js)

var express = require('express');
var app = express();

var cors = require('cors');
var bodyParser = require('body-parser');

//enables cors
  'allowedHeaders': ['sessionId', 'Content-Type'],
  'exposedHeaders': ['sessionId'],
  'origin': '*',
  'preflightContinue': false


If you are working on localhost, try this, this one the only extension and method that worked for me (Angular, only javascript, no php)


It's not clear from the question, but assuming this is something happening on a development or test client, and given that you are already using Fiddler you can have Fiddler respond with an allow response:

  • Select the problem request in Fiddler
  • Open the AutoResponder tab
  • Click Add Rule and edit the rule to:
    • Method:OPTIONS server url here, e.g. Method:OPTIONS http://localhost
    • *CORSPreflightAllow
  • Check Unmatched requests passthrough
  • Check Enable Rules

A couple notes:

  1. Obviously this is only a solution for development/testing where it isn't possible/practical to modify the API service
  2. Check that any agreements you have with the third-party API provider allow you to do this
  3. As others have noted, this is part of how CORS works, and eventually the header will need to be set on the API server. If you control that server, you can set the headers yourself. In this case since it is a third party service, I can only assume they have some mechanism via which you are able to provide them with the URL of the originating site and they will update their service accordingly to respond with the correct headers.

In a Chrome extension, you can use


to rewrite the server response headers. You can either replace an existing header or add an additional header. This is the header you want:

Access-Control-Allow-Origin: *


I was stuck on CORB issues, and this fixed it for me.

have you tried changing the dataType in your ajax request from jsonp to json? that fixed it in my case.

Cross-Origin Read Blocking (CORB), an algorithm by which dubious cross-origin resource loads may be identified and blocked by web browsers before they reach the web page..It is designed to prevent the browser from delivering certain cross-origin network responses to a web page.

First Make sure these resources are served with a correct "Content-Type", i.e, for JSON MIME type - "text/json", "application/json", HTML MIME type - "text/html".

Second: set mode to cors i.e, mode:cors

The fetch would look something like this

 fetch("https://example.com/api/request", {
            method: 'POST',
            body: JSON.stringify(data),
            mode: 'cors',
            headers: {
                'Content-Type': 'application/json',
                "Accept": 'application/json',
    .then((data) => data.json())
    .then((resp) => console.log(resp))
    .catch((err) => console.log(err))

references: https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md


There is an edge case worth mentioning in this context: Chrome (some versions, at least) checks CORS preflights using the algorithm set up for CORB. IMO, this is a bit silly because preflights don't seem to affect the CORB threat model, and CORB seems designed to be orthogonal to CORS. Also, the body of a CORS preflight is not accessible, so there is no negative consequence just an irritating warning.

Anyway, check that your CORS preflight responses (OPTIONS method responses) don't have a body (204). An empty 200 with content type application/octet-stream and length zero worked well here too.

You can confirm if this is the case you are hitting by counting CORB warnings vs. OPTIONS responses with a message body.

Response headers are generally set on the server. Set 'Access-Control-Allow-Headers' to 'Content-Type' on server side

It seems that this warning occured when sending an empty response with a 200.

This configuration in my .htaccess display the warning on Chrome:

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST,GET,HEAD,OPTIONS,PUT,DELETE"
Header always set Access-Control-Allow-Headers "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization"

RewriteEngine On
RewriteRule .* / [R=200,L]

But changing the last line to

RewriteRule .* / [R=204,L]

resolve the issue!

I had the same problem with my Chrome extension. When I tried to add to my manifest "content_scripts" option this part:

    //  "matches": [ "<all_urls>" ],
    //  "css": [ "myStyles.css" ],
    //  "js": [ "test.js" ]

And I remove the other part from my manifest "permissons":


Only when I delete it CORB on one of my XHR reqest disappare.

Worst of all that there are few XHR reqest in my code and only one of them start to get CORB error (why CORB do not appare on other XHR I do not know; why manifest changes coused this error I do not know). That's why I inspected the entire code again and again by few hours and lost a lot of time.

I encountered this problem because the format of the jsonp response from the server is wrong. The incorrect response is as follows.

callback(["apple", "peach"])

The problem is, the object inside callback should be a correct json object, instead of a json array. So I modified some server code and changed its format:

callback({"fruit": ["apple", "peach"]})

The browser happily accepted the response after the modification.

Try to install "Moesif CORS" extension if you are facing issue in google chrome. As it is cross origin request, so chrome is not accepting a response even when the response status code is 200

Questions with javascript tag:

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax Drag and drop menuitems Is it possible to execute multiple _addItem calls asynchronously using Google Analytics? DevTools failed to load SourceMap: Could not load content for chrome-extension TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app What does 'x packages are looking for funding' mean when running `npm install`? SyntaxError: Cannot use import statement outside a module SameSite warning Chrome 77 "Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6 Why powershell does not run Angular commands? Typescript: No index signature with a parameter of type 'string' was found on type '{ "A": string; } Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop Push method in React Hooks (useState)? JS file gets a net::ERR_ABORTED 404 (Not Found) React Hooks useState() with Object useState set method not reflecting change immediately Can't perform a React state update on an unmounted component UnhandledPromiseRejectionWarning: This error originated either by throwing inside of an async function without a catch block Can I set state inside a useEffect hook internal/modules/cjs/loader.js:582 throw err How to post query parameters with Axios? How to use componentWillMount() in React Hooks? React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory in ionic 3 How can I force component to re-render with hooks in React? What is useState() in React? How to call loading function with React useEffect only once Objects are not valid as a React child. If you meant to render a collection of children, use an array instead How to reload current page? Center content vertically on Vuetify Getting all documents from one collection in Firestore ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment How can I add raw data body to an axios request? Sort Array of object by object field in Angular 6 Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) Axios Delete request with body and headers? Enable CORS in fetch api Vue.js get selected option on @change Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) Angular 6: How to set response type as text while making http call

Questions with jquery tag:

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.? How to solve 'Redirect has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header'? Ajax LARAVEL 419 POST error Laravel 5.5 ajax call 419 (unknown status) Only on Firefox "Loading failed for the <script> with source" How to prevent page from reloading after form submit - JQuery Vue component event after render How to use jQuery Plugin with Angular 4? How to disable a ts rule for a specific line? Bootstrap 4 File Input How to force reloading a page when using browser back button? Datatables Select All Checkbox Unable to preventDefault inside passive event listener Getting Error "Form submission canceled because the form is not connected" How to create multiple page app using react Set height of chart in Chart.js console.log(result) returns [object Object]. How do I get result.name? Setting and getting localStorage with jQuery JQuery: if div is visible Using OR operator in a jquery if statement Deprecation warning in Moment.js - Not in a recognized ISO format How to use aria-expanded="true" to change a css property DataTables: Cannot read property style of undefined Disable Chrome strict MIME type checking Consider marking event handler as 'passive' to make the page more responsive Cannot open local file - Chrome: Not allowed to load local resource "Uncaught TypeError: a.indexOf is not a function" error when opening new foundation project what is right way to do API call in react js? why $(window).load() is not working in jQuery? How to use JQuery with ReactJS $(...).datepicker is not a function - JQuery - Bootstrap remove first element from array and return the array minus the first element How to use a jQuery plugin inside Vue Uncaught SyntaxError: Invalid or unexpected token jquery 3.0 url.indexOf error How to redirect page after click on Ok button on sweet alert? Content Security Policy: The page's settings blocked the loading of a resource Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document' Checkbox value true/false vue.js 'document.getElementById' shorthand Removing legend on charts with chart.js v2

Questions with ajax tag:

Getting all files in directory with ajax Cross-Origin Read Blocking (CORB) Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource Fetch API request timeout? How do I post form data with fetch api? Ajax LARAVEL 419 POST error Laravel 5.5 ajax call 419 (unknown status) How to allow CORS in react.js? Angular 2: How to access an HTTP response body? How to post a file from a form with Axios console.log(result) returns [object Object]. How do I get result.name? $http.get(...).success is not a function What is difference between Axios and Fetch? Make XmlHttpRequest POST using JSON React Js: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 Response to preflight request doesn't pass access control check How can I send an Ajax Request on button click from a form with 2 buttons? API Gateway CORS: no 'Access-Control-Allow-Origin' header Download pdf file using jquery ajax Getting request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource AngularJS POST Fails: Response for preflight has invalid HTTP status code 404 Why my $.ajax showing "preflight is invalid redirect error"? "Mixed content blocked" when running an HTTP AJAX operation in an HTTPS page Jquery in React is not defined Laravel csrf token mismatch for ajax POST Request How to write data to a JSON file using Javascript loading json data from local file into React JS Load More Posts Ajax Button in WordPress jQuery ajax request being block because Cross-Origin CORS header 'Access-Control-Allow-Origin' missing How do I cancel an HTTP fetch() request? Send form data with jquery ajax json How to refresh table contents in div using jquery/ajax Ajax post request in laravel 5 return error 500 (Internal Server Error) React JS - Uncaught TypeError: this.props.data.map is not a function Uncaught TypeError: Cannot read property 'appendChild' of null Required request body content is missing: org.springframework.web.method.HandlerMethod$HandlerMethodParameter No 'Access-Control-Allow-Origin' header is present on the requested resource error Synchronous XMLHttpRequest warning and <script> React.js create loop through Array Reinitialize Slick js after successful ajax call jQuery has deprecated synchronous XMLHTTPRequest How to call a php script/function on a html button click jQuery Refresh/Reload Page if Ajax Success after time Solve Cross Origin Resource Sharing with Flask Stupid error: Failed to load resource: net::ERR_CACHE_MISS SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data Windows.history.back() + location.reload() jquery AJAX jQuery refresh div every 5 seconds Dynamically add item to jQuery Select2 control that uses AJAX

Questions with cors tag:

Axios having CORS issue Cross-Origin Read Blocking (CORB) Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource How to allow CORS in react.js? Set cookies for cross origin requests XMLHttpRequest blocked by CORS Policy How to enable CORS in ASP.net Core WebAPI No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API How to overcome the CORS issue in ReactJS Trying to use fetch and pass in mode: no-cors CORS: credentials mode is 'include' Enabling CORS in Cloud Functions for Firebase Uncaught (in promise) TypeError: Failed to fetch and Cors error CORS error :Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response Access to Image from origin 'null' has been blocked by CORS policy 'Access-Control-Allow-Origin' issue when API call made from React (Isomorphic app) Spring security CORS Filter Adding Access-Control-Allow-Origin header response in Laravel 5.3 Passport How to configure CORS in a Spring Boot + Spring Security application? What is an opaque response, and what purpose does it serve? CORS with POSTMAN No 'Access-Control-Allow-Origin' header in Angular 2 app How can I enable CORS on Django REST Framework Response to preflight request doesn't pass access control check XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header API Gateway CORS: no 'Access-Control-Allow-Origin' header Spring CORS No 'Access-Control-Allow-Origin' header is present How to create cross-domain request? AngularJS POST Fails: Response for preflight has invalid HTTP status code 404 No 'Access-Control-Allow-Origin' header is present on the requested resource - Resteasy Laravel 5.1 API Enable Cors Request header field Access-Control-Allow-Headers is not allowed by itself in preflight response CORS with spring-boot and angularjs not working What are the integrity and crossorigin attributes? CORS header 'Access-Control-Allow-Origin' missing Why is an OPTIONS request sent and can I disable it? AngularJS: No "Access-Control-Allow-Origin" header is present on the requested resource How to allow Cross domain request in apache2 Asp.Net WebApi2 Enable CORS not working with AspNet.WebApi.Cors 5.2.3 No 'Access-Control-Allow-Origin' header is present on the requested resource error MVC web api: No 'Access-Control-Allow-Origin' header is present on the requested resource How can I fix the 'Missing Cross-Origin Resource Sharing (CORS) Response Header' webfont issue? Solve Cross Origin Resource Sharing with Flask Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers How to enable CORS in flask Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy How to enable CORS on Firefox? Keep getting No 'Access-Control-Allow-Origin' error with XMLHttpRequest What exactly does the Access-Control-Allow-Credentials header do? Firefox 'Cross-Origin Request Blocked' despite headers

Questions with cross-origin-read-blocking tag:

Cross-Origin Read Blocking (CORB)