Request Method: OPTIONS

[14113]

I'm trying to make a POST request but I'm still sending OPTIONS as a 'Request Method'.

Example:

import fetch from 'isomorphic-fetch'

fetch('http://localhost:3000/api/v1/sign_in', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: {
      login: 'test'
    }
})

In Chrome, I can see:
Remote Address:127.0.0.1:3000
Request URL:http://localhost:3000/api/v1/sign_in
Request Method:OPTIONS
Status Code:404 Not Found

Thanks in advance.

[max107]

OPTIONS is a crossorigin. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

[JohnBaileyN]

I think this Issue can be closed. This is how Browsers behave as @max107 pointed out.

[14113]

There is some wired think. When I remove line with:

 'Content-Type': 'application/json'

it works.

So this is correct setup:

import fetch from 'isomorphic-fetch'

fetch('http://localhost:3000/api/v1/sign_in', {
    method: 'POST',
    headers: {
      'Accept': 'application/json'
    },
    body: {
      login: 'test'
    }
})

No OPTIONS request anymore.

[zlwaterfield]

@14113 That worked for me, thanks.

[jmwohl]

Removing the 'Content-Type': 'application/json' works... does anyone know why? Is it a bug, or is this expected?

[AienTech]

Also got this issue, but removing content-type won't help!

[zeng-ge]

sometimes, remove content-type caused modify server-end codes

[borm]

Not worked for me, and method options is random

fetch('URL', {
  headers: {'Token': ...},
  method: 'POST',
  body: JSON.stringify({....})
})

[AlexRogersJG]

@borm How do you mean random? You're getting OPTIONS because you have a custom header Token by the looks of it

[thomi137]

Does not work here either. Despite the fact I set the header to content-type: application/json, when fetching, this somehow gets changed to text... And my webservice will complain. Back to axios then...

[thecodegoddess]

We are having the same issue as well. We have to have the content-type header, so this lib won't work for us

[quickshiftin]

I can confirm this is working properly even with the Content-Type header. In my case I need to send a cross-origin PUT request with a JSON payload. In this case, a pre-flight request issued by the browser is expected as @max107 said early on in this thread. Here's my request invocation with isomorphic-fetch:

import fetch from 'isomorphic-fetch';
const productId = 1;
const data = {description: 'An updated product description!'};
const res = await fetch(
    `https://my-api.com/product/${productId}`,
    {
        method: 'PUT',
        body: JSON.stringify(data),
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        },
    });
const data = await res.json();

After implementing support for CORS requests on my server, I was still getting tripped up for a bit because the Chrome network tab was only listing the OPTIONS request, however my Apache logs showed two requests, OPTIONS followed by PUT as expected...

I was about to file a bug with Chrome, however, I realized that after unchecking the XHR filter in the network tab, my PUT request became visible. Feels like a Chromism (read: bug)... Seems the PUT request does not count as XHR in the network tab's eyes, despite the fact all the GET requests I've sent through this library do, LOL. (Maybe something funky with the pre-flight flow inside the browser).

Still though, FWIW, isomorphic-fetch is working as expected in this regard AFAICT.

[kellyrmilligan]

removing content type worked for me, but i'm also going to investigate setting up the cors headers properly. ATM just setting it in apache to test.