0

I am trying to pull API data and when I do, I get the error message of "No Access Control Origin detected" even though I add a Access Control Allow Origin header

When I npm start in Chrome/Firefox it doesn't work but when I use IE it does work

Here is my code:

 componentDidMount() {
        fetch(url , {
            mode: 'cors',
            headers: { 
            'X-API-KEY': API_KEY,
            'Access-Control-Allow-Origin': 'https://localhost:3000/',
            'Access-Control-Allow-Credentials': 'true',
            'Access-Control-Allow-Headers': 'Content-Type, Origin, Accept, Authorization',
            'Accept': 'application/json',
            'Content-Type': 'application/json'
            }

        })
            .then(res => res.json())
            .then(json => {
                this.setState({
                    isLoaded: true,
                    items: json,
                })
            })
        };
Tjm8679
  • 15
  • 6
  • 1
    Possible duplicate of [No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe) – JBallin Aug 24 '18 at 04:17
  • 1
    You need to add those headers on the back-end, not the front-end. – JBallin Aug 24 '18 at 04:17

1 Answers1

0

I would think this is a server side issue with the API you are using. Make sure that option request have the proper Access-Control headers and can accept your request.

thezachcannon
  • 121
  • 2