8

I'm missing something here. I was struggling to get the API call to work. Then I split the url up like below and it works -literally once. After that it fails to work again. I swear I did not change something.

How do you go about it in AXIOS?

Error message is:

XMLHttpRequest cannot load http://magicseaweed.com/api/W2Z26fXscpELi7nPB0svfqcGj9FtGO9e/forecast/?spot_id=228. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

import axios from 'axios';

const ROOT_URL = `magicseaweed.com/api/W2Z26fXscpELi7nPB0svfqcGj9FtGO9e/forecast/`;

export const FETCH_WEATHER = 'FETCH_WEATHER';

export function fetchWeather() {
    const url = `http://${ROOT_URL}?spot_id=228`;
    const request = axios.get(url);

    return {
        type: FETCH_WEATHER,
        payload: request
    };
}

I tried with this modified GET aswell, but to no avail

axios({
  url: url ,
  headers: {"Access-Control-Allow-Origin": "*"},
});
Glenn
  • 8,932
  • 2
  • 41
  • 54
morne
  • 4,035
  • 9
  • 50
  • 96
  • Possible duplicate of [No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '...' is therefore not allowed access](http://stackoverflow.com/questions/20433655/no-access-control-allow-origin-header-is-present-on-the-requested-resource-or). This is a super common question and doesn't have anything to do with redux. The post alluded to answers your question, but there may be better ones. – Robert Moskal Oct 12 '16 at 20:15
  • Okay, fair point. but looking at `axios` documentation, I faild to see something to configure this. I did try some other options, but it did not work. I will list it – morne Oct 12 '16 at 20:20
  • This is something that the server has to be set up to do. You can still call magic seaweed if you set up a project on a server as the answer tells you. – Robert Moskal Oct 12 '16 at 20:23
  • I just called the url https://magicseaweed.com/api/W2Z26fXscpELi7nPB0svfqcGj9FtGO9e/forecast/?spot_id=228 and a part from the error you get due to CORS, the server seems the respond with a 500, which indicates an unexpected error on their side. Are you sure there are no issues with the API? It happens sometime that whoever implements the server api forgets to add the CORS header in the response if there's an error (in this case 500) – fabio.sussetto Oct 12 '16 at 20:25
  • That change you just made in your question is not going to fix anything, that header is supposed to be returned in the response from the server, not sent in the request. It's the server api job to do that. – fabio.sussetto Oct 12 '16 at 20:27
  • There's absolutely no problem with calling the api: curl magicseaweed.com/api/W2Z26fXscpELi7nPB0svfqcGj9FtGO9e/forecast/?spot_id=228 you just can't call it in the browser. – Robert Moskal Oct 12 '16 at 20:31
  • @fabio.sussetto. the url you listed is a https. which fails. if you drop the `s` to just http it returns fine. Sorry to be such a dumbass, but realy im srtugeling with this for the 1st time today. – morne Oct 12 '16 at 20:32
  • The point is that because of the cross origin security checks implemented in the browser, calling it with CURL is not the same thing as calling it with an AJAX call – fabio.sussetto Oct 12 '16 at 20:32
  • There must be some kind of Throttling on there side, because I just ran it again and it worked just fine. – morne Oct 12 '16 at 20:38
  • Possible duplicate of [XMLHttpRequest cannot load https://www.\[website\].com/](http://stackoverflow.com/questions/35553500/xmlhttprequest-cannot-load-https-www-website-com) – Quentin Oct 12 '16 at 20:41

1 Answers1

1

Look here:

https://www.npmjs.com/package/magicseaweed

Towards the bottom it says why their API wrapper won't work in the browser. It's the same reason you can't make the Ajax call in the browser.

FAQ

Can I use this module in the browser with browserify?

In theory yes, but the Magicseaweed API is currently not sending the Access-Control-Allow-Origin header in browser requests (somehow the header is sent if you replay the request via cURL).

So if the API changes that behavior, this module will work with browserify.

You can stand up your own proxy server or you can use one of the free ones available on the internet:

https://developer.yahoo.com/yql/

https://crossorigin.me/

Robert Moskal
  • 21,737
  • 8
  • 62
  • 86
  • 1
    I'm trying calling it myself and I can confirm that the API doesn't return a Access-Control-Allow-Origin header, so it's not going to work with AJAX. Btw, it's axios, not browserify :) Edit: sorry just saw they say the same thing on their npm page, that's why you said browserify :) – fabio.sussetto Oct 12 '16 at 20:43