Blocage de lecture inter-origine (CORB)

Question

J'ai appelé l'API d'un tiers en utilisant Jquery AJAX. J'obtiens l'erreur suivante dans la console :

Blocage de la lecture d'origine croisée (CORB) : réponse d'origine croisée bloquée. MON URL avec le type MIME application/json. Voir https://www.chromestatus.com/feature/5629709824032768 pour plus de détails.

J'ai utilisé le code suivant pour l'appel Ajax :

$.ajax({
  type: 'GET',
  url: My Url,
  contentType: 'application/json',
  dataType:'jsonp',
  responseType:'application/json',
  xhrFields: {
    withCredentials: false
  },
  headers: {
    'Access-Control-Allow-Credentials' : true,
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods':'GET',
    'Access-Control-Allow-Headers':'application/json',
  },
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.log("FAIL....=================");
  }
});

Lorsque j'ai vérifié dans Fiddler, j'ai obtenu les données dans la réponse mais pas dans la méthode de succès Ajax.

Aidez-moi, s'il vous plaît.

Answer 1

 dataType:'jsonp',

Vous faites une demande JSONP, mais le serveur répond avec JSON.

Le navigateur refuse d'essayer de traiter le JSON en tant que JSONP car cela constituerait un risque pour la sécurité. (Si le navigateur a fait essayer de traiter le JSON comme JSONP, au mieux, cela échouerait).

Voir cette question pour plus de détails sur ce qu'est JSONP. Notez qu'il s'agit d'un piratage méchant pour contourner la politique de l'origine identique (Same Origin Policy) qui était utilisée avant que CORS ne soit disponible. CORS est une solution beaucoup plus propre, plus sûre et plus puissante au problème.

---

On dirait que vous essayez d'effectuer une demande d'origine croisée et que vous lui envoyez tout ce que vous pouvez imaginer en un tas massif d'instructions contradictoires.

Vous devez comprendre comment fonctionne la politique de la même origine.

Voir cette question pour un guide détaillé.

---

Maintenant, quelques remarques sur votre code :

contentType: 'application/json',

• Ceci est ignoré lorsque vous utilisez JSONP
• Vous faites une demande GET. Il n'y a pas de corps de requête pour décrire le type de .
• Cela rendra une requête d'origine croisée non simple, ce qui signifie qu'en plus des autorisations CORS de base, vous devrez également vous occuper d'un pré-vol.

Enlevez ça.

 dataType:'jsonp',

• Le serveur ne répond pas avec JSONP.

Enlevez ça. (Vous pourriez faire en sorte que le serveur réponde avec JSONP à la place, mais CORS est mieux).

responseType:'application/json',

Cette option n'est pas prise en charge par jQuery.ajax. Supprimez-la.

xhrFields : { withCredentials : false },

Il s'agit de la valeur par défaut. A moins que vous ne le mettiez à true avec ajaxSetup, supprimez ceci.

  headers: {
    'Access-Control-Allow-Credentials' : true,
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods':'GET',
    'Access-Control-Allow-Headers':'application/json',
  },

• Ce sont des en-têtes de réponse. Ils doivent figurer dans la réponse, et non dans la demande.
• Cela rendra une requête d'origine croisée non simple, ce qui signifie qu'en plus des autorisations CORS de base, vous devrez également vous occuper d'un pré-vol.

Answer 2

Dans la plupart des cas, la réponse bloquée ne devrait pas affecter le comportement de la page Web et le message d'erreur CORB peut être ignoré sans risque. Par exemple, l'avertissement peut survenir dans les cas où le corps de la réponse bloquée était déjà vide, ou lorsque la réponse allait être livrée à un contexte qui ne peut pas la gérer (par exemple, un document HTML tel qu'une page d'erreur 404 livrée à une balise).

https://www.chromium.org/Home/chromium-security/corb-for-developers

J'ai dû nettoyer le cache de mon navigateur, je lisais dans ce lien que, si la requête obtient une réponse vide, nous obtenons cette erreur d'avertissement. Je recevais des CORS sur ma requête, et donc la réponse de cette requête était vide, tout ce que j'avais à faire était de vider le cache du navigateur, et les CORS ont disparu. Je recevais des CORS parce que Chrome avait sauvegardé le numéro de port dans le cache, le serveur acceptait simplement localhost:3010 et je faisais localhost:3002 à cause du cache.

Answer 3

Retourner la réponse avec l'en-tête 'Access-Control-Allow-Origin:*'. Vérifiez le code ci-dessous pour la réponse du serveur Php.

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

Answer 4

Vous devez ajouter CORS du côté du serveur :

Si vous utilisez nodeJS alors :

D'abord vous besoin d'installer cors en utilisant la commande ci-dessous :

npm install cors --save

Maintenant ajoutez le code suivant au fichier de départ de votre application comme ( app.js or server.js )

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

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

//enables cors
app.use(cors({
  'allowedHeaders': ['sessionId', 'Content-Type'],
  'exposedHeaders': ['sessionId'],
  'origin': '*',
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false
}));

require('./router/index')(app);

Answer 5

La question n'est pas claire, mais en supposant que cela se passe sur un client de développement ou de test, et étant donné que vous utilisez déjà Fiddler, vous pouvez faire en sorte que Fiddler réponde par une réponse d'autorisation :

• Sélectionnez la demande de problème dans Fiddler
• Ouvrez le AutoResponder onglet
• Cliquez sur Add Rule et modifier la règle pour :
  • Méthode:OPTIONS url du serveur ici par exemple Method:OPTIONS http://localhost
  • *CORSPreflightAllow
• Vérifiez Unmatched requests passthrough
• Vérifiez Enable Rules

Quelques notes :

1. Il s'agit évidemment d'une solution pour le développement et les essais lorsqu'il n'est pas possible ou pratique de modifier le service API.
2. Vérifiez que les accords que vous avez conclus avec le fournisseur d'API tiers vous permettent de le faire.
3. Comme d'autres l'ont fait remarquer, cela fait partie du fonctionnement de CORS, et l'en-tête devra éventuellement être défini sur le serveur API. Si vous contrôlez ce serveur, vous pouvez définir les en-têtes vous-même. Dans ce cas, comme il s'agit d'un service tiers, je ne peux que supposer qu'il dispose d'un mécanisme par lequel vous pouvez lui fournir l'URL du site d'origine et qu'il mettra à jour son service en conséquence pour répondre avec les bons en-têtes.