How can I add `Headers`?

[trinaldi]

I'm having trouble with CORS and other stuff related to Headers, there's nothing mentioning it and no example.

Is it possible to add it?

I've tried:

const DisplayRemoteData = () => {
  var myHeaders = new Headers({
    'Access-Control-Allow-Origin': '*',
    'Accept':'*/*'
  })
  const { data } = useFetch("http://date.nager.at/api/v1/get/BR/2019",myHeaders;
  console.log(data)
  //if (error) return <Err error={error} />;
  //if (loading) return <Loading />;
  return (
    <span>
        RemoteData:<br/>
      {data}
    </span>
  );
};

I don't thing it's working like intended, though.

[dai-shi]

I haven't tried it, but it's probablly like this:

// ...
const opts = useMemo(() => ({ headers: myHeaders }), []);
const { data } = useFetch("http://date.nager.at/api/v1/get/BR/2019", opts);

ref: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

[trinaldi]

No =/

The way I did it does return a 200 response but somehow it keep fetching the API and I'm stuck at Loading...

Network Tab

My code, a simple GET:, I just changed the URI from the minimalexample:

import React from 'react';
import ReactDOM from 'react-dom';

import { useFetch } from 'react-hooks-fetch';

const Err = ({ error }) => <span>Error:{error.message}</span>;

const Loading = () => <span>Loading...</span>;

const DisplayRemoteData = () => {
  var myHeaders = new Headers({
    'Access-Control-Allow-Origin': '*',
    'Accept':'*/*'
  })
  const { data } = useFetch('http://date.nager.at/api/v1/get/BR/2019',myHeaders);
  return (
    <span>
      RemoteData:
      {console.log(data)}
    </span>
  );
};

const App = () => (
  <DisplayRemoteData />
);

ReactDOM.render(<App />, document.getElementById('app'));

In this example I removed the Errorand Loading

[dai-shi]

https://codesandbox.io/s/82nymo45l8 This is what I tried.

Even though the network tab says "200 OK", the console output is: Access to fetch at 'https://date.nager.at/api/v1/get/BR/2019' from origin 'https://82nymo45l8.codesandbox.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. Seems like the api server doesn't allow it?

[trinaldi]

I guess localhost is not allowed. I even tried adding the header mentioned above and it doesn't work. myHeaders looks empty but you can get the values

I chose this API based on this information. It says "CORS" No.
I guess it's a localhost thing (based on a simple search).

[dai-shi]

myHeaders looks empty but you can get the values.

That's simply because the Header object is not displayed with console.table.

It says "CORS" No.

Maybe, that has been changed.

curl -v http://date.nager.at/api/v1/get/BR/2019 doesn't show "Access-Control-Allow-Origin".

Updated the example with a different API. https://codesandbox.io/s/82nymo45l8

[trinaldi]

That's simply because the Header object is not displayed with console.table. console.table was a last attempt; The object doesn't show in any console.

Maybe, that has been changed Haha such a simple solution, nice! May it's time to update the list.

Updated the example with a different API.

Thank you!
If I may suggest something, @dai-shi , add an example with headers.

I'm closing this issue.

[dai-shi]

Here you go: https://github.com/dai-shi/react-hooks-fetch/tree/master/examples/05_headers