Access-Control-Allow-Origin header is present on the requested resource

Question

I am using Pixabay API to get data. Everything is working fine, but I get some warning in my console.

  axios.get(url).then(res =>
    dispatch({
      type: GET_STOCK,
      payload: {
        tag,
        page: page + 1,
        images: res.data.hits
      }
    })
  );

Warnings are

Access to XMLHttpRequest at 'https://pixabay.com/api/?key=my_key_is_here' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I tried to set header and some options in my axios function.

Yes of course ... But I was already read this article and tried some of this answers,but my conflict does not solved yet .((( — Khoren Grigoryan, Feb 18 '19 at 18:18
You can get cors error if the url doesn't have the right signature. — Isaac Pak, Sep 03 '19 at 04:49

Peter Šály · Answer 1 · 2019-02-18T18:46:19.783

0

Pixabay allows CORS access. No special request headers needed. I succesfully accessed the API from localhost.

edited Feb 18 '19 at 18:46

answered Feb 18 '19 at 18:33

Peter Šály

2,848
2
12
26

Yes...Maybe ... I setup this project over 6 month ago and this worked without any warnings,but today i started get this warnings in my console . – Khoren Grigoryan Feb 18 '19 at 18:38

Khoren Grigoryan · Answer 2 · 2019-02-18T19:11:10.910

-1

export const getStock = (tag, page) => dispatch => {
      let url = null;

      if (tag) {
        url = `https://pixabay.com/api/?key=my_key=${tag}&per_page=${32 *
          (page + 1)}&image_type=photo`;
      } else {
        url = `https://pixabay.com/api/?key=my_key&per_page=${32 *
          (page + 1)}&image_type=photo`;
      }

      axios.get(url).then(res =>
        dispatch({
          type: GET_STOCK,
          payload: {
            tag,
            page: page + 1,
            images: res.data.hits
          }
        })
      );
    };

The interesting thing is , i add onScrol event to my Component which contains this images.When Components mounted everything is fine,but when i scroll to get more images ,an that time i get this warnings

This is a code

onScroll = e => {
    let finish = e.target.scrollTop + e.target.offsetHeight || 0;
    let height = this.stockRef.current.offsetHeight * 0.4;

    const {
      stock: { page, tag },
      getStock
    } = this.props;

    if (finish >= height && page <= 4) {
      getStock(tag, page);
    }
  };

Sorry if i doing some typing mistakes

edited Feb 18 '19 at 19:11

answered Feb 18 '19 at 18:45

Khoren Grigoryan

77
1
5

I don't see how this answers the question. Perhaps you could add an explanation of how your code differs from the OP's and why the changes were made? – Heretic Monkey Feb 18 '19 at 18:50
@HereticMonkey He is OP. He wanted to add a comment. – Peter Šály Feb 18 '19 at 18:53
@Khoren please delete this answer and put the code into Question by editing it,. Thx – Peter Šály Feb 18 '19 at 18:53
No problem :) Just add content of this answer into question. Then delete this Answer – Peter Šály Feb 18 '19 at 19:02

Access-Control-Allow-Origin header is present on the requested resource

2 Answers2