Problème CORS lors de la tentative de publication de JQuery avec des données json, mais pas avec du texte brut ou x-www-form-urlencoded

Problème, j'obtiens une réponse d'erreur CORS lorsque j'effectue une publication jQuery avec les données json de l'application. Mais je n'obtiens pas cette erreur avec les articles jQuery avec des données en clair / texte ou x-www-urlencoded-form.

Problème / Détails:

J'ai deux applications en cours d'exécution sur ma VM Ubuntu, une application React exécutée sur http: // localhost: 3000 et un service Web Java fonctionnant à partir d'un serveur Payara à partir de mon IDE Netbeans 10 à cette URL http: // cduran-virtualbox: 8080 / TestMavenWebApplication / firstservicecall . J'essaie de tester différentes publications jQuery avec différents types de contenu de l'application React au service Web.

Pour éviter d'obtenir un message d'erreur CORS, j'ai ajouté ceci au serveur Web java objet HttpServletRequest response.addHeader ("Access-Control-Allow-Origin", "http: // localhost: 3000");

Cependant, j'obtiens cette erreur lorsque j'écris une publication jQuery avec Json data:

public class FirstServlet extends HttpServlet {
    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {

        String contentType = request.getHeader("content-type");
        response.addHeader("Access-Control-Allow-Origin", "http://localhost:3000");

        if (contentType.equals("text/plain")) {
            InputStream is = request.getInputStream();
            BufferedReader br = new BufferedReader(new InputStreamReader(is));
            String line = "";
            while((line = br.readLine()) != null) {
                System.out.println("Plain/Text data received: " + line);
            }
            response.getWriter().print("Hello back from Servlet - content type received plain text");
        } else if (contentType.equals("application/x-www-form-urlencoded; charset=utf-8")) {
            String msgReceived = request.getParameter("var1");
            System.out.println("Message Received: " + msgReceived);            
            response.getWriter().print("Hello back from Servlet - content type received x-www-form-urlencoded");
        } else if (contentType.toLowerCase().contains("json")) {
           JSONObject json = new JSONObject(request.getParameterMap());
           System.out.println("json data received: " + json.toString());
                       response.getWriter().print("Hello back from Servlet - content type received application/json");
        } else {
            response.getWriter().print("Hello back from Servlet - content type undefined");
        }
    }    
}

Mais j'ai deux autres méthodes de test qui font jQuery Posts (une où le content-type est text / plain et l'autre est application / x-www-form-urlencoded qui n'a pas ce problème, c'est-à-dire que je peux envoyer avec succès un message jQuery Post au service Web et obtenir une réponse.

Voici le code du jQuery Post avec les données json où J'ai le problème de réponse CORS :

  var myObject = {
      var1: 'Hello from CommunicationForm'  
   };
   var urlToPost = 'http://cduran-VirtualBox:8080/TestMavenWebApplication/firstservicecall';

   $.ajax({
       type: "POST",
       //dataType: "text",
       contentType: 'application/x-www-form-urlencoded; charset=utf-8',
       url: urlToPost,
       data: myObject,
       success: function(response) {
           console.log("application/x-www-form-urlencoded response: " + response);
       }
   });

Voici le jQuery publier avec du texte brut qui fonctionne (c'est-à-dire pas de réponse CORS, je peux voir le code du service Web atteint, et je peux voir la réponse en retour à cette application React qui a lancé le post jQuery):

var urlToPost = 'http://cduran-VirtualBox:8080/TestMavenWebApplication/firstservicecall';

   $.ajax({
       type: "POST",
       //dataType: "text",
       contentType: 'text/plain',
       url: urlToPost,
       data: "Hello from CommunicationForm (plain text)",
       success: function(response) {
         console.log("plain text response: " + response);
       }
   });   

Voici mon post jQuery avec x-www-urlencoded-form qui fonctionne également:

  var urlToPost = 'http://cduran-VirtualBox:8080/TestMavenWebApplication/firstservicecall';

  $.ajax({
     type: "POST",
     dataType: "json",
     contentType: 'application/json; charset=utf-8',
     //crossDomain: true,
     url: urlToPost,
     async:true,
     data: JSON.stringify({ Object: 'CD', Quantity: '4' }),
     success: function(response) {
        console.log("json response: " + response);
    },
    failure: function(errMsg) {
        alert(errMsg);
    }
 }); 

Comme preuve supplémentaire, voici une capture d'écran de mon application React, vous pouvez ignorer le champ de texte de saisie car il ne fait rien. Mais j'ai 3 boutons de soumission d'entrée. Comme on peut le déduire des noms de bouton, l'un fait le post jQuery ci-dessus avec le type de contenu x-www-urlencoded-form, l'autre fait text / plain, et l'autre json.

Après avoir cliqué sur le bouton x-www .., cette déclaration de journal (comme indiqué dans la capture d'écran) est renvoyée par le service Web (indiquant que cela fonctionne bien). p >

réponse application / x-www-form-urlencoded: Bonjour de retour de Servlet - type de contenu reçu x-www-form-urlencoded

Après avoir cliqué sur le bouton en clair, cette déclaration de journal est affichée sur la capture d'écran, ce qui prouve à nouveau que le jQuery Post fonctionne correctement:

Réponse en texte brut: Bonjour de retour du servlet - type de contenu reçu texte brut

Les deux derniers messages du journal de la console sont la réponse d'erreur CORS après avoir cliqué sur le bouton Submit_json.

EDIT / UPDATE 2:

Notes supplémentaires - En utilisant l'application Post Man, je peux envoyer le message HTTP avec application / json comme type de contenu à mon application de service Web Java et j'ai vu la réponse.

J'ai créé une application Java Maven standard (pas Web app) et je peux également envoyer un message HTTP avec application / json comme type de contenu à mon application de service Web Java, et je peux voir la réponse bien dedans.

Quand j'ai soumis le jQuery POST avec l'application / json de mon application Web REACT J'ai vu sur la page réseau des outils de développement sur le navigateur Web que le POST est envoyé en OPTION (cela s'est produit dans les navigateurs Firefox et Chrome).

Un commentaire dans ce lien https://github.com/angular/angular/issues/22492 mentionne pour envoyer des requêtes simples et répertorie les types de contenu qui n'incluent pas application/json.

Cela rend les choses plus confuses.

EDIT / UPDATE 1:

Voici mon code de serveur principal. Rien de très spécial, il vérifie simplement le champ d'en-tête de type de contenu, puis analyse l'objet et renvoie une réponse différente à l'application React.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://cduran-virtualbox:8080/TestMavenWebApplication/firstservicecall. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).