No 'Access-Control-Allow-Origin' over rxjs

Question

I've been building up simple react app which shows following crytowat.ch api. https://api.cryptowat.ch/markets

here is my code for redux-observable Epic

const cryptowatchEpic = action$ =>
action$.ofType(FETCH_PRICE).mergeMap(action =>
    ajax({
      url: `${baseUrl}${action.payload}/btcusd/price`,
      crossDomain: true,
      method: 'GET',
      headers: {
        'Access-Control-Request-Origin': 'https://api.cryptowat.ch/'
      },
      withCredentials: true
    }).map(response => fetchPriceFilled(response))
  );

and here is console error

XMLHttpRequest cannot load https://api.cryptowat.ch/markets/kraken/btcusd/price. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 405.

I think passed Access-Control-Request-Origin in headers but i occurs error. is there something i missed?

thanks in advance

It looks like that api is not intended to be used from the browser. Check if cryptowatch provides a browser-friendly API, or if it doesn't, you will have to implement these calls in your backend service. — Tamas Hegedus, Jun 12 '17 at 16:47
You can still use that API from your frontend code by making the request through a CORS proxy; try `url: \`https://cors-anywhere.herokuapp.com/${baseUrl}${action.payload}/btcusd/price\`` (and of course remove the `headers: { 'Access-Control-Request-Origin': 'https://api.cryptowat.ch/' }`) — sideshowbarker, Jun 12 '17 at 17:24

acdcjunior · Accepted Answer · 2017-06-12T16:37:23.853

4

You've got it backwards.

The server is the one responsible for sending the 'Access-Control-Request-Origin' header, not the client.

So, in other words, you need server-side access to add those headers there. More info at "No 'Access-Control-Allow-Origin' header is present on the requested resource".

edited Jun 12 '17 at 16:37

answered Jun 12 '17 at 16:32

acdcjunior

132,397
37
331
304

it might sounds stuid but how do i get 'Access-Control-Request-Origin' header from server? – gnujoow Jun 12 '17 at 16:38
You have to get access to the server and configure/add code there to make it return those headers. If you don't have access to the server (aka it is not yours), you can't do much. (In this case, the only option would be for you to setup your own server that forwards every call to the original one...) – acdcjunior Jun 12 '17 at 16:41
thanks for your explanation. the api i want to use seems like public Api and I access with chrome browser it response correctly. so do you mean i should build up server to pass the api? – gnujoow Jun 12 '17 at 16:47
2

Yes, exactly. You say "I access with chrome browser it response correctly", that is normal behavior. Those headers are only needed when you access the API through JavaScript Ajax. – acdcjunior Jun 12 '17 at 16:49
thank you so much you helped me a lot :) cheers – gnujoow Jun 12 '17 at 16:53

No 'Access-Control-Allow-Origin' over rxjs

1 Answers1