反应 axios GET 不工作。注销“name.toUppercase 不是函数”

Question

我已经创建了最基本的 React 应用程序，并且正在尝试执行一个简单的 GET 请求。它抛出一个 TypeError 并指出，“name.toUppercase 不是一个函数”。我只有一个功能。任何想法是什么导致了这个或如何调试？

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;

这是控制台中返回的内容

    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>

Answer 1

尝试将您的 axios 请求更改为：

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));

你弄错了两件事 - 标题应该是一个对象，而数据response应该在response.data.

此外，附带说明一下，Access-Control-Allow-Origin 标头通常作为响应标头而不是请求出现。