Oct 19, 2017

Level 2

Request to api from axios (cross domain) (CORS) error

Hello. I'm try to fetch data from bank api with AXIOS and heve an error. I suffer 3 days with this error. I already read alot about CORS but didn't find an answer. I even tryed xmlHTTTPRequest with pure javascript and it worked, but AXIOS didn't! Please help.

axios code:

methods: {

    getUsd () {

        let url = 'https://api.privatbank.ua/p24api/pubinfo?json&exchange&coursid=5';

        axios.get(url,{}, config).then(response => {

            this.usdPrivatBank = response.data[4].buy;

            console.log(this.usdPrivatBank);
            
        });

    }

Errors from browser console:

Failed to load resource: the server responded with a status of 405 (Not Allowed)

(index):1 Failed to load https://api.privatbank.ua/p24api/pubinfo?json&exchange&coursid=5: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://incomeaccounting.dev' is therefore not allowed access. The response had HTTP status code 405.

ejdelmonico

8 years ago

Level 53

@Serpent Have a look at this easy to use package https://github.com/barryvdh/laravel-cors Or, try to tweak you axios config with

headers: {
      'Access-Control-Allow-Origin': '*',
      'Content-Type': 'application/json',
    },

or, it may be some other config params so just do a search. You can just use the request method which takes in the config to make the request and that should work as long as Apache or Nginx aren't blocking it or the api server is not configured for cors.

4 likes

RamjithAp

8 years ago

Level 10

Add cors middleware in your app like this

https://stackoverflow.com/questions/33076705/laravel-5-1-api-enable-cors

Or use this https://github.com/barryvdh/laravel-cors

Or temporarily add this two lines in your public/index.php top of the file:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');

1 like

Serpent

8 years ago

Level 2

@RamjithAp, @ejdelmonico your method worked only in case i have access to the server side and write it on the server. But i have not. It's bank api site i try to connect and i didn't have access to the bank server, i try use bank api to do my application.

RamjithAp

8 years ago

Level 10

Firstly apologies I haven't seen that third-party bank API. However, have you tried like this

 return axios(url, {
      method: 'GET',
      mode: 'no-cors',
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json',
      },
      withCredentials: true,
      credentials: 'same-origin',
    }).then(response => {
    })

1 like

elias

5 years ago

Level 2

mode, credentials, crossdomain are for fetch, not supported on axios https://github.com/axios/axios/issues/1358#issuecomment-364789526

eugenefvdm

7 years ago

Level 31

Subscribing to this thread because I have a similar problem. In answer to @ramjithap , I tried adding all those options to the Axios call but no luck.

2 likes

LaraBABA

7 years ago

Level 10

Any news on this, having the exact same issue with Laravel and an app in VUE not included inside the Laravel blade's templating.

JenuelDev

3 years ago

Level 1

Any Update on this?

nekooee

3 years ago

Level 1

I have this problem too and I haven't been able to solve it for a few days.

Please or to participate in this conversation.