Fetch: Code working in Chrome with native fetch, but not Safari with the polyfill.

[callumacrae]

I have the following code:

fetch('//api.mysite/url', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  }
});

My Access-Control-Request-Headers contains content-type (note case), which works using native fetch in Chrome, but fails in Safari using this polyfill:

Failed to load resource: Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

Initially I thought it was something to do with case, but lowercasing Content-Type didn't seem to fix it.

Per RFC 7230, headers should be case insensitive anyway: "Each header field consists of a case-insensitive field name followed by a colon (":"), optional leading whitespace, the field value, and optional trailing whitespace."

Any ideas what could be causing this? If it's a bug, happy to contribute a fix.

[mislav]

Hmm, no idea. We usually close such bug reports due to being caused by CORS and not our polyfill code, but if you say that this code works in Chrome (native fetch) but not in Safari (polyfilled fetch via XMLHttpRequest), then there might be some limitation with either the polyfill or CORS implementation in Safari.

That being said, this exception does seem to be raised from Safari's CORS handling, and even if it's buggy, we don't have access to browser internals to do anything about it.

Are you able to make a XMLHttpRequest to your API from Safari? If so, please share the steps. Otherwise, I have no ideas.

[callumacrae]

Yep, not working with XMLHttpRequest either. Very strange.

Thanks!

[cxoltero]

try:

{
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  mode: 'cors'
}

[bradwoods]

I had an issue using the fetch API to get an image from an AWS S3 bucket. I was receiving a CORS issue on some of the images. Adding

headers: {
    'Content-Type': 'application/json'
},

fixed the issue.

[MTruocchio]

I have the same problem, I have already tested several CORS configurations, and in chrome it works normally and in Safari or when I compile for iOS I have this error.

[romelgomez]

@MTruocchio

I land here looking for the same error behavior. Work in Chrome and Safari not.

Error: "Request header field Content-Type is not allowed by Access-Control-Allow-Headers"

Request returns Request header field Content-Type is not allowed by Access-Control-Allow-Headers
A default configuration will only work if the client sends a "simple" request, i.e., GET, HEAD, POST as method, and some headers such as Accept, Accept-Language, Content-Language, and Content-Type, etc. Content-Type has an important restriction: only application/x-www-form-urlencoded, multipart/form-data, and text/plain are allowed.

Typically the Content-Type of an API will be application/json, and this is not allowed by default. Content-Type needs to be explicitly specified in the configuration object under the requestHeaders key

ref: https://github.com/agrueneberg/Corser#request-returns-request-header-field-content-type-is-not-allowed-by-access-control-allow-headers

    // const  headers = new HttpHeaders().set('Content-Type', 'application/json; charset=UTF-8');
    const  headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    const post$ = this.httpClient.post(HUB_SPOT_ENDPOINT, DATA, {
      headers: headers
    });

It work now, hope It help you too.

[Jejugo]

Does anyone have a solution for that? Gettin the same problem here

[seanaye]

Im also experiencing the same issues using node static serve only in safari.

setHeaders(res, path) { res.setHeader('X-Frame-Options', 'ALLOWALL') res.setHeader('Content-Type', 'application/x-www-form-urlencoded, charset=UTF-8') res.setHeader('Access-Control-Allow-Origin', '*') res.setHeader('Access-Control-Allow-Methods', 'GET') res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization') }

[aesyondu]

try:

{
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  mode: 'cors'
}

You are a god among men. This solved my issue with safari, thanks!

I'm curious why does accept: */* work for chromium and firefox, but not safari?