Using Fetch API to POST XML

Question

I'm trying to use Fetch API to handle POST of XML data to avoid cross-origin issues with XmlHttpRequest. The issue I face is that despite setting my Content-Type to 'text/xml' (which is the only supported content-type header in this case) my request's content-type is being reset to text/plain resulting in a HTTP status of 415 from the requested content.

Here is my fetch function:

    function doFetch(Content)
    {
        return fetch(
        URL, { method: 'POST',
           mode: 'no-cors',
           headers: new Headers(
           {'Content-Type': 'text/xml; charset=utf-8',
            'Accept': '*/*',
            'Accept-Language': 'en-GB',
            'Accept-Encoding': 'gzip, deflate',
            'Connection': 'Keep-alive',
            'Content-Length': Content.length                
            }),
            body: Content
           });
    }

Content is a string of XML data.

And this is the header which is actually being used:

    Content-Length:1537
    content-type:text/plain;charset=UTF-8

Just wondering if what I'm trying to do is possible, and if it is what I'm doing wrong? (I'm kind of new to web-development).

Thanks!

score 5 · Answer 1 · answered Feb 14 '17 at 10:30

Because you’re setting mode: 'no-cors' (why?…) for the request, browsers won’t allow you to set any request headers other than CORS-safelisted request-headers. See the spec requirements:

…if guard is "request-no-cors" and name/value is not a CORS-safelisted request-header, return.

Setting Content-Type: text/xml; charset=utf-8 makes it no longer a CORS-safelisted request-header; Content-Type is only a CORS-safelisted request-header if its value is application/x-www-form-urlencoded, multipart/form-data, or text/plain.

So the start of a solution here is to not use mode: 'no-cors'.

The only case where it usually makes sense to set mode: 'no-cors' is if you’re using Service Workers for caching responses—because for a mode: 'no-cors' request, browsers won’t let your script access any properties of the response, so the only useful thing you can do with it is cache it.

I'm trying to use Fetch API to handle POST of XML data to avoid cross-origin issues with XmlHttpRequest.

The Fetch API follows the same cross-origin request model as XHR, so it’s unclear what cross-origin issues you’d be attempting to avoid by using the Fetch API…

Ah thank you. That explains why it's being changed! The issue with cross-origin is that the resource I'm trying to access doesn't have any method for dealing with OPTIONS request. For some reason using Internet Explorer 11 and earlier allows me to send and receive without issue but any 'modern' browser, Edge, Chrome etc is giving me a HTTP 404 response because of the CORS issue. — Krisisonfire, Feb 14 '17 at 10:43

score 0 · Answer 2 · answered Jun 22 '19 at 09:52

Cors or cross origin access means that you can't transfer data between 2 servers on different ip's or even ports if you are not explicitly specify that with the Allow-Cross-Origin-Acess tag inside you're response header. Sending from the client this tag won't do. It has to be in the header of the response.

Using Fetch API to POST XML

2 Answers2

Linked