title: using javascript fetch API with a SOAP web service
body: <p>I'm having a really rough time POST'ing to a SOAP web service using the fetch API. I worked out my CORS issues using a chrome plugin, but now it seems to be having an issue with the format of what I'm sending. I've tried implementing fixes I see in other questions, especially in Content-Type and whatnot, but I cannot get any different result. It just plain does not like a &lt; in slot 1.</p>
  
  <p>Based on other questions, the actual 'data' that I am sending does look a little different from other SOAP requests... they mention an Envelope, they define an XML version, etc. Mine is the pure XML data I send in a SOAP service tester here locally. So I guess what I don't know is whether that software is adding additional details to the request 'payload' before sending it to the service. </p>
  
  <p>The WSDL is not very helpful, but I might be looking in the wrong spot. </p>
  
  <p>Any advice is highly appreciated. </p>
  
  <p>My Javascript/fetch: </p>
  
  <pre><code>var base64 = require('base-64');
  
  let url = 'http://SCRB4APUSLSA801:9080/apex/services/argobasicservice';
  let username = 'abo055';
  let password = 'hidden';
  let headers = new Headers();
  
  export const N4RecordScan = {
  
      submit(data) {
  
          headers.append('Content-Type', 'text/xml');
          headers.append('SOAPAction', 'basicInvoke');
          headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));
  
          let dataPrefix = '&lt;soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:arg="http://www.navis.com/services/argobasicservice"&gt;&lt;soapenv:Header/&gt;&lt;soapenv:Body&gt;&lt;arg:basicInvoke&gt;&lt;arg:scopeCoordinateIds&gt;APMT/USLAX/LAX/LAX&lt;/arg:scopeCoordinateIds&gt;&lt;arg:xmlDoc&gt;&lt;![CDATA[';
          let dataSuffix = ']]&gt;&lt;/arg:xmlDoc&gt;&lt;/arg:basicInvoke&gt;&lt;/soapenv:Body&gt;&lt;/soapenv:Envelope&gt;';
  
          data = dataPrefix + data + dataSuffix;
  
          console.log('about to send ' + data);
  
          fetch(url, {
              body: data,
              method: 'POST',
              mode: 'cors',
              headers: headers,
              credentials: 'include'
          })
              .then(response =&gt; console.log(response))
              .catch(function(error) {
                  console.log(error);
              });
          //.done();
  
      }
  };
  </code></pre>
  
  <p>This is what I'm sending in data:</p>
  
  <pre><code>&lt;gate&gt;&lt;record-scan&gt;&lt;gate-id&gt;USLAX&lt;/gate-id&gt;&lt;stage-id&gt;asd&lt;/stage-id&gt;&lt;lane-id&gt;asd&lt;/lane-id&gt;&lt;external-console-id&gt;asd&lt;/external-console-id&gt;&lt;truck tag-id="asd" license-nbr="asd"/&gt;&lt;equipment&gt;&lt;container eqid="asd" on-chassis-id="asd" /&gt;&lt;chassis eqid="asd"&gt;&lt;/chassis&gt;&lt;/equipment&gt;&lt;/record-scan&gt;&lt;/gate&gt;
  </code></pre>
  
  <p>This is the response I'm getting:</p>
  
  <pre><code>&lt;soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"&gt;
  &lt;soapenv:Body&gt;
  &lt;soapenv:Fault&gt;
  &lt;faultcode&gt;soapenv:Server.userException&lt;/faultcode&gt;
  &lt;faultstring&gt;org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; Content is not allowed in prolog.&lt;/faultstring&gt;
  &lt;detail&gt;…&lt;/detail&gt;
  &lt;/soapenv:Fault&gt;
  &lt;/soapenv:Body&gt;
  &lt;/soapenv:Envelope&gt;
  </code></pre>
  
  <p>And this is the WSDL for the service I'm reaching out to.</p>
  
  <pre><code>&lt;wsdl:definitions xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/" xmlns:tns="http://www.navis.com/services/argobasicservice" xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/" name="ArgobasicService" targetNamespace="http://www.navis.com/services/argobasicservice"&gt;
  &lt;wsdl:documentation xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/"&gt;Argo Services&lt;/wsdl:documentation&gt;
  &lt;wsdl:types&gt;
  &lt;xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified" targetNamespace="http://www.navis.com/services/argobasicservice"&gt;
  &lt;xsd:element name="basicInvoke"&gt;
  &lt;xsd:complexType&gt;
  &lt;xsd:sequence&gt;
  &lt;xsd:element name="scopeCoordinateIds" type="xsd:string"/&gt;
  &lt;xsd:element maxOccurs="1" minOccurs="1" name="xmlDoc" type="xsd:string"/&gt;
  &lt;/xsd:sequence&gt;
  &lt;/xsd:complexType&gt;
  &lt;/xsd:element&gt;
  &lt;xsd:element name="basicInvokeResponse"&gt;
  &lt;xsd:complexType&gt;
  &lt;xsd:sequence&gt;
  &lt;xsd:element name="basicInvokeResponse" type="xsd:string"/&gt;
  &lt;/xsd:sequence&gt;
  &lt;/xsd:complexType&gt;
  &lt;/xsd:element&gt;
  &lt;xsd:element name="invokeRequest"&gt;
  &lt;xsd:complexType&gt;
  &lt;xsd:sequence&gt;
  &lt;xsd:element name="scopeCoordinateIds" type="xsd:string"/&gt;
  &lt;xsd:element maxOccurs="1" minOccurs="1" name="request" type="xsd:string"/&gt;
  &lt;xsd:element maxOccurs="1" minOccurs="1" name="handler" type="xsd:string"/&gt;
  &lt;xsd:element maxOccurs="1" minOccurs="1" name="locale" type="xsd:string"/&gt;
  &lt;/xsd:sequence&gt;
  &lt;/xsd:complexType&gt;
  &lt;/xsd:element&gt;
  &lt;xsd:element name="invokeResponse"&gt;
  &lt;xsd:complexType&gt;
  &lt;xsd:sequence&gt;
  &lt;xsd:element name="basicInvokeResponse" type="xsd:string"/&gt;
  &lt;/xsd:sequence&gt;
  &lt;/xsd:complexType&gt;
  &lt;/xsd:element&gt;
  &lt;/xsd:schema&gt;
  &lt;/wsdl:types&gt;
  &lt;wsdl:message name="basicInvokeRequest"&gt;
  &lt;wsdl:part element="tns:basicInvoke" name="basicInvoke"/&gt;
  &lt;/wsdl:message&gt;
  &lt;wsdl:message name="basicInvokeResponse"&gt;
  &lt;wsdl:part element="tns:basicInvokeResponse" name="basicInvokeResponse"/&gt;
  &lt;/wsdl:message&gt;
  &lt;wsdl:message name="invokeRequest"&gt;
  &lt;wsdl:part element="tns:invokeRequest" name="invokeRequest"/&gt;
  &lt;/wsdl:message&gt;
  &lt;wsdl:message name="invokeResponse"&gt;
  &lt;wsdl:part element="tns:invokeResponse" name="invokeResponse"/&gt;
  &lt;/wsdl:message&gt;
  &lt;wsdl:portType name="ArgobasicServicePort"&gt;
  &lt;!--  name of your wrapped method  --&gt;
  &lt;wsdl:operation name="basicInvoke"&gt;
  &lt;wsdl:input message="tns:basicInvokeRequest"/&gt;
  &lt;wsdl:output message="tns:basicInvokeResponse"/&gt;
  &lt;/wsdl:operation&gt;
  &lt;wsdl:operation name="invoke"&gt;
  &lt;wsdl:input message="tns:invokeRequest"/&gt;
  &lt;wsdl:output message="tns:invokeResponse"/&gt;
  &lt;/wsdl:operation&gt;
  &lt;/wsdl:portType&gt;
  &lt;wsdl:binding name="ArgobasicServiceSoapBinding" type="tns:ArgobasicServicePort"&gt;
  &lt;soap:binding style="document" transport="http://schemas.xmlsoap.org/soap/http"/&gt;
  &lt;!--  name of your wrapped method  --&gt;
  &lt;wsdl:operation name="basicInvoke"&gt;
  &lt;soap:operation soapAction=""/&gt;
  &lt;wsdl:input&gt;
  &lt;soap:body use="literal"/&gt;
  &lt;/wsdl:input&gt;
  &lt;wsdl:output&gt;
  &lt;soap:body use="literal"/&gt;
  &lt;/wsdl:output&gt;
  &lt;/wsdl:operation&gt;
  &lt;wsdl:operation name="invoke"&gt;
  &lt;soap:operation soapAction=""/&gt;
  &lt;wsdl:input&gt;
  &lt;soap:body use="literal"/&gt;
  &lt;/wsdl:input&gt;
  &lt;wsdl:output&gt;
  &lt;soap:body use="literal"/&gt;
  &lt;/wsdl:output&gt;
  &lt;/wsdl:operation&gt;
  &lt;/wsdl:binding&gt;
  &lt;wsdl:service name="ArgobasicService"&gt;
  &lt;wsdl:port binding="tns:ArgobasicServiceSoapBinding" name="ArgobasicServicePort"&gt;
  &lt;soap:address location="http://scrb4apuslsa701:10080/apex/services/argobasicservice"/&gt;
  &lt;/wsdl:port&gt;
  &lt;/wsdl:service&gt;
  &lt;/wsdl:definitions&gt;
  ( function(){ window.SIG_EXT = {}; } )()
  </code></pre>