3

I've created the most basic react app possible and am trying to do a simple GET request. It throws a TypeError and states, 'name.toUppercase is not a function'. I only have the one function. Any ideas what is causing this or how to debug?

import React, { Component } from 'react';
import axios from 'axios';
import logo from './logo.svg';
import './App.css';

class App extends Component {
    state = {
        order_id: Number,
        order_date: '',
        size: '',
        crust: '',
        toppings: [],
    };

    componentDidMount() {
        return axios
            .get('https://59b6v76zci.execute-api.us-west- 
                                            2.amazonaws.com/nr/example', {
                method: 'GET',
                mode: 'cors',
                headers: 'Access-Control-Allow-Origin',
            })
            .then(response => this.setState({ order_id: response.order_id }))
            .catch(err => console.log('err', err));
    }

    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">Welcome to React</h1>
                </header>
                <p className="App-intro">
                    To get started, edit <code>src/App.js</code> and save to reload.
                </p>
            </div>
        );
    }
}

export default App;

This is the what is returned in the console

    err TypeError: name.toUpperCase is not a function
    at processHeader (normalizeHeaderName.js:7)
    at Object.forEach (utils.js:218)
    at normalizeHeaderName (normalizeHeaderName.js:6)
    at transformRequest (defaults.js:32)
    at transform (transformData.js:16)
    at Object.forEach (utils.js:224)
    at transformData (transformData.js:15)
    at dispatchRequest (dispatchRequest.js:37)
    at <anonymous>
Adam Bradbury
  • 91
  • 2
  • 11

1 Answers1

5

Try changing your axios request to this:

axios
    .get('https://59b6v76zci.execute-api.us-west-2.amazonaws.com/nr/example', {
        method: 'GET',
        mode: 'cors',
        headers: { 'Access-Control-Allow-Origin': true },
    })
    .then(response => this.setState({ order_id: response.data.order_id }))
    .catch(err => console.log('err', err));

You got two things wrong - headers should be an object, and the data in the response should be under response.data.

Also, on a side-note, Access-Control-Allow-Origin header usually comes as a response header and not on the request.

nirsky
  • 2,955
  • 3
  • 22
  • 35
  • Thanks @nirsky. I tried changing the header to an object but was still having issues. The problem arose due to the fact that the GET request was to a third party domain api that didn't have access headers. I eventually got it to work by adding 'https://cors.io/?' in front of the url. I got the idea from this post https://stackoverflow.com/questions/46785318/the-cors-header-access-control-allow-origin-is-missing?rq=1. It now retrieves the information. – Adam Bradbury Apr 23 '18 at 15:03
  • Headers expecting an object was the case in an issue I just resolved with the error message posted in the question. I wish there was a way for axios to actually return a hint about this being the case. Thank you for pointing this out! :) – Gurnzbot Jul 18 '18 at 14:37