Pourquoi y a-t-il un problème de cors après l'ajout de l'en-tête Access-Control-Allow-Origin à l'arrière-plan?

Question

Je fais un appel ajax à un domaine différent. Mon membre de l'équipe a ajouté l'en-tête Access-Control-Allow-Origin à http://localhost:3000.

$.ajax({ 
      type: 'GET', 
      url: myurl, 
      beforeSend: function(xhr) { 
       xhr.setRequestHeader('Authorization', 'Bearer '+authorization); 
      }, 
      crossDomain: true, 
      // xhrFields: { 
      // withCredentials: true 
      // }, 
      contentType: 'application/json', 
      dataType: 'JSON', 
      success: function (response) { 
      if(time_one === 0){ 
       main_result = response; 
       time_one++; 
      } 
      if(response.length==0){ 
       alert("NO Data; Try a valid search") 
       $('.row3, #paging').hide(); 
       $('.loading-gif').show(); 
       $('#table').html(''); 
       myCallBack(main_result); 
      } 
      else{ 
       $('#table').html('') 
       myCallBack(response); 
      } 
      }, 
      error: function(err) { 
      $('.loading-gif').hide(); 
      $(".pageblocker").hide(); 
      alert('Error: '+JSON.stringify(err)); 
      myCallBack(main_result) 
      } 
     }); 

Si j'essaie de cette façon, je reçois 'Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.' Je ne comprends pas pourquoi je reçois ce type d'erreur, même après avoir ajouté l'en-tête ACAO.

Et j'ai également remarqué une autre erreur si j'ajoute l'attribut 'withCredentials'. 'Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:3000' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.' Je ne comprends pas la différence entre ces deux erreurs.

Answer 1

Le serveur myurl doit renvoyer l'en-tête de réponse Access-Control-Allow-Origin.

Si vous n'avez pas accès à l'environnement serveur du serveur myurl pour configurer ce serveur afin d'envoyer l'en-tête de réponse Access-Control-Allow-Origin, vous devrez effectuer la demande via proxy à la place. Vous pouvez trouver plus de détails sur la configuration de ce type de proxy dans la réponse au "No 'Access-Control-Allow-Origin' header is present on the requested resource".

Quoi qu'il en soit le fait que l'ajout Access-Control-Allow-Origin au backend http://localhost:3000 n'a aucun effet dans ce cas, devrait-car Access-Control-Allow-Origin est un en-tête de réponse qui doit être envoyé par le serveur une demande est faite. http://localhost:3000 n'est pas cela, mais c'est le serveur qui sert le code JavaScript de l'interface qui lance la requête.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS est la meilleure ressource pour comprendre comment tout cela fonctionne. D'autres réponses ici pour jeter un oeil à:

• Angular 2 HTTP POST returns data but goes to error (cors)
• Why isn't rack-cors filtering incoming requests, according to Rspec
• Will ASP.net Core CORS policy prevent resource access from non-browser requests?
• CORS is a double system checking?