title: Invoking servlet through React app using Fetch API - Gives Failed to load Resource error (406 - Not Acceptable)
body: <p>I'm very new to React JS and Java servlets. I have created a view in React and an API endpoint in servlet using Jersey. Both frontend and backend are run on a Tomcat server on my local machine. The servlet tries to access the service running at <code>http://localhost:37070/expenseClaimService/start</code> to post a new claim. This service is separately tested, and it returns the <code>id</code> of the new claim created.</p>
  
  <p>Now I am trying to invoke the endpoint in servlet using <code>Fetch</code> from the React app. However I keep receiving <code>Failed to load resource: the server responded with a status of 406</code> in React app. </p>
  
  <p><a href="https://i.stack.imgur.com/lduqi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lduqi.png" alt="error"></a></p>
  
  <p><strong>The fetch call in React app</strong></p>
  
  <pre><code>  handleAddClaim = () =&gt; {
      console.log("in method");
      fetch("http://localhost:8080/eca/api/claims/new-claim", {
        method: "POST",
        headers: {
          Accept: "text/plain",
          "Content-Type": "application/json",
          "Access-Control_Allow-Orign": "*"
        },
        body: JSON.stringify({
          empName: "Test Vendor4",
          empFirstname: "Test",
          empLastname: "Vendor4",
          empEmail: "test4@mail.com",
          empId: "test3",
          empJobTitle: "SE",
          date: "08 December, 2018",
          refNo: "testRef999",
          memo: "OPD test claim 11",
          claims: [
            {
              amount: "9500.00",
              memo: "Test claim - Medicine",
              billDate: "4 December, 2018"
            }
          ]
        })
      })
      .then(response =&gt; {
          console.log(response);
      })
      .catch(error =&gt; {
          console.error(error);
      });
    };
  </code></pre>
  
  <p><strong>Endpoint in Servlet</strong> </p>
  
  <pre><code>@Path("/claims")
  public class OPDClaimEndpoint {
  
      @POST
      @Path("/new-claim")
      @Produces(MediaType.TEXT_HTML)
      @Consumes(MediaType.APPLICATION_JSON)
      public String addNewClaim(JsonObject body){            
          return ExecutionUtils.generatePostRequest(body.toString());
      }
  }
  </code></pre>
  
  <p><strong>Generating post request (using Apache HttpClient)</strong></p>
  
  <pre><code>public static String generatePostRequest(String input){
      String url = "http://localhost:37070/expenseClaimService/start";
  
      try {
          StringEntity requestEntity = new StringEntity(
                  input,
                  ContentType.APPLICATION_JSON);
  
          HttpPost request = new HttpPost(url);
          request.setHeader(HttpHeaders.ACCEPT, MediaType.APPLICATION_JSON);
          request.setEntity(requestEntity);
          HttpClient client = HttpClientBuilder.create().build();
          HttpResponse response = client.execute(request);
          return response.toString();
      }
      catch ( IOException e) {
          logger.info(e.getMessage());
      }
      return "Failed";
  }
  </code></pre>
  
  <p><strong>web.xml</strong></p>
  
  <pre><code>&lt;servlet&gt;
      &lt;servlet-name&gt;eca-api&lt;/servlet-name&gt;
      &lt;servlet-class&gt;com.sun.jersey.spi.container.servlet.ServletContainer&lt;/servlet-class&gt;
      &lt;init-param&gt;
          &lt;param-name&gt;com.sun.jersey.config.property.packages&lt;/param-name&gt;
          &lt;param-value&gt;com.org.eca.client.api.endpoint&lt;/param-value&gt;
      &lt;/init-param&gt;
      &lt;init-param&gt;
          &lt;param-name&gt;com.sun.jersey.api.json.POJOMappingFeature&lt;/param-name&gt;
          &lt;param-value&gt;true&lt;/param-value&gt;
      &lt;/init-param&gt;
      &lt;load-on-startup&gt;1&lt;/load-on-startup&gt;
  &lt;/servlet&gt;
  &lt;servlet-mapping&gt;
      &lt;servlet-name&gt;eca-api&lt;/servlet-name&gt;
      &lt;url-pattern&gt;/api/*&lt;/url-pattern&gt;
  &lt;/servlet-mapping&gt;
  </code></pre>
  
  <p>How do I solve this problem so that I can call the service from React app? 
  Any help is much appreciated.</p>