No headers in meteor http request issue

help
1

Hi,
In a react component, I’m making an HTTP call after the component mounted:

  componentDidMount() {
    let apiEndPoint = 'https://paper-api.alpaca.markets/v1/last/stocks/AAPL';
    let callOptions = {
      'headers':{ 'APCA-API-KEY-ID': 'id...',
                  'APCA-API-SECRET-KEY':'key..'
                }
      };
    let stockData = HTTP.call('GET', apiEndPoint, callOptions
    , () => {console.log('getting stock data')})
  }

However, I get the following error:

Access to XMLHttpRequest at 'https://paper-api.alpaca.markets/v1/last/stocks/AAPL' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Does anybody maybe have an idea how can I fix that?

Thanks!

2

It seems you make this call from the client. That also gives away your key and secret to the client.

A better way would likely be to make this call at the server. You can do that in a Meteor method. Then the client calls the Meteor method and gets the results via the server.

The error you get is because of browser restrictions. In general it is becoming more and more difficult to do calls to other domains than the app domain. It is sometimes possible but not easy and in many cases not desired.

4 Likes
3

To expand on @lucfranken’s comment, not only is doing it on the server allow for more secure handling of keys / secrets, but it also avoids the CORS checks

1 Like