하고 싶은 일

절차

React+axios

React 프로젝트 만들기

npx create-react-app react-axios
cd react-axios
yarn start

axios 도입

yarn add axios

React 코드

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tasks: []
    };
    this.getData = this.getData.bind(this);
  }

  getData() {
    axios
      .get('http://localhost:8000/test')
      .then(results => {
        const data = results.data;
        console.log(data);
        this.setState({
          tasks: [...data]
        });
      });
  }

  render() {
    const tasks = this.state.tasks.map(task => {
      return <li key={task.id}>{task.title}</li>;
    });

    return (
      <Fragment>
        <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>

        <div>
          <button onClick={this.getData}>getData</button>
          <ul>
            {tasks}
          </ul>
        </div>
      </Fragment>
    );
  }
}

export default App;

Failed to load http://localhost:8000/test: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3001' is therefore not allowed access.
createError.js:16 Uncaught (in promise) Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:87)

Nginx로 설정하는 경우

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
add_header Access-Control-Allow-Credentials true;

Laravel에서 설정하는 경우

동작 확인

참고