소개

본고는 아래의 흐름에 따라, axios+SAM+API Gateway를 이용해, GET 및 POST 메소드의 API를 두드리는 곳까지를 목표로 하고 있습니다.

SAM를 이용하여 API Gateway 및 lambda

로컬에서 방금 만든 API Gateway 의 GET 메서드를 두드리는

로컬에서 방금 만든 API Gateway 의 POST 메서드를 두드리는

SAM 는 API Gateway 를 이용하여 lambda 및 curl 를 구축하고, 작성한 API에 대해 API Gateway 명령을 이용하여 두드리는 곳까지를 검증했습니다.
이번은, 「로컬로부터 방금 작성한 GET 의 API Gateway 메소드를 두드린다」라고 하는 것을 시도해 가고 싶습니다.

지난번

2. 로컬에서 방금 만든 GET의 'Access-Control-Allow-Origin': '*' 메소드를 두드린다

localhost를 시작하고 이전 URL을 두드려보십시오.
데모용 소스는 이하로 했습니다(실처리 부분만).

import React, {Component} from 'react';
// import ReactDOM from 'react-dom';
import axios from 'axios';

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            'appMessage': 'hello,app'
        };
        this.getApi = this.getApi.bind(this);
    }

    instance = axios.create({
        baseURL: 'https://{メソッドのURL}//Prod'
    });

    getApi(){
        this.instance.get('/hello')
            .then((response) => {
                this.setState({
                    'appMessage': response.data['message']
                })
            })
            .catch(() => {
                this.setState({
                    'appMessage': 'faild get message from button'
                })                
            })
    }

    render(){
        return(
            <div>
                <div>{this.state.appMessage}</div>
                <input type='button' onClick={this.getApi} value="button" />
            </div>
        )
    }
}

export default App;

이 작업을 수행하면 다음과 같은 오류가 발생했습니다.

Access to XMLHttpRequest at 'https://{メソッドのURL}//Prod/hello' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

아무래도 CORS에 관한 구현이 제대로 되지 않기 때문에 화난 것 같습니다 (참고한 AWS 공식 문서는 ).
그래서 response에 이하의 header를 포함하도록 합니다.

// app.py
    return {
        "statusCode": 200,
        'headers': {
            'Access-Control-Allow-Headers': 'Content-Type',
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'OPTIONS,POST,GET'
        },        
        "body": json.dumps({
            "message": "hello world",
            # "location": ip.text.replace("\n", "")
        }),
    }

이제 배포 후 다시 실행하면 무사히 api가 두드렸습니다!
여기

시험에 response 부분을 확인하면 이전에 추가한 header가 포함되어 있는지 확인할 수 있습니다.

원인 부분을 좀 더 자세히

(※이쪽의 기사가 매우 참고가 되었습니다! )

앞서 언급했듯이 이번 원인은 CORS에 관한 구현이 제대로 되지 않았다는 것입니다.
CORS란, 「Cross-Origin Resource Sharing」의 약자로, 다른 오리진간에 자원을 공유하기 위해서는, 제대로 허가해 주자고 하는 것이라고 합니다. 이번에 나는

두드리는 원:localhost

두드리는 곳: API Gateway

그러므로 이들은 당연히 도메인이 다릅니다. 그래서 API로부터의 response에 자원의 공유를 허가한다 curl 를 header에 추가할 필요가 있었다고 하는 것이군요.

끝에

이번에는 스스로 작성한 API에 대해 앱을 통해 두드려 보는 것을 검증했습니다. 지금까지 CORS는 말을 알고 있는 정도였기 때문에 이번 같은 것은 생각한 적이 없었습니다. 그 때문에, 「어째서 POST 로 두드렸는데, 앱 경유라고 두드릴 수 없는 것인가… ?」라고 많이 빠졌습니다.
이번 경험을 거쳐, 「그럼.
다음에 설명할 수 있으면 좋겠습니다.