axios.post のリクエストが404 を解決したいです

Question

前提・実現したいこと

ローカル環境でフロントエンド(React)からサーバーサイド(Golang)へのPOSTをaxiosとginを用いて行いたいです

発生している問題・エラーメッセージ

axiosのpostが実行されるとstatus code 404 になります

OPTIONS http://localhost:4000/api/post 404 (Not Found)

Access to XMLHttpRequest at 'http://localhost:4000/api/post' 
from origin 'http://localhost:3000' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested 
resource.

createError.js:17 Uncaught (in promise) Error: Network Error
    at createError (createError.js:17)
    at XMLHttpRequest.handleError (xhr.js:80)

Request URL: http://localhost:4000/api/post
Request Method: OPTIONS
Status Code: 404 Not Found
Remote Address: [::1]:4000
Referrer Policy: no-referrer-when-downgrade
Content-Length: 18
Content-Type: text/plain
Date: Wed, 10 Jul 2019 17:36:01 GMT
Provisional headers are shown
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Origin: http://localhost:3000
Referer: http://localhost:3000/post/finish
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

該当のソースコード

import React from 'react';
import {Form, Container} from 'semantic-ui-react';
import axios from 'axios';
import {Redirect, withRouter} from 'react-router';

interface ArticleState {
  title: string;
  content: string;
  redirect: boolean;
}

class Post extends React.Component<{}, ArticleState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      title: '',
      content: '',
      redirect: false,
    };

    this.handleChangeTitle = this.handleChangeTitle.bind(this);
    this.handleChangeContent = this.handleChangeContent.bind(this);
    this.setRedirect = this.setRedirect.bind(this);
    this.renderRedirect = this.renderRedirect.bind(this);
  }

  handleChangeTitle(e: React.FormEvent<HTMLInputElement>) {
    this.setState({title: e.currentTarget.value});
  }

  handleChangeContent(e: React.FormEvent<HTMLInputElement>) {
    this.setState({content: e.currentTarget.value});
  }

  setRedirect() {
    this.setState({
      redirect: true,
    });

    const data = {title: this.state.title, content: this.state.content};
    axios.post('http://localhost:4000/api/post', data).then(res => {
      console.log(res);
    });
  }

  renderRedirect = () => {
    if (this.state.redirect) {
      return <Redirect to="/post/finish" />;
    }
  };

  render() {
    return (
      <Container text style={{marginTop: '3em'}}>
        <Form onSubmit={this.setRedirect}>
          <Form.Input
            label="Title"
            placeholder=""
            name="title"
            value={this.state.title}
            onChange={this.handleChangeTitle}
          />
          <Form.Field
            label="Content"
            placeholder=""
            name="content"
            value={this.state.content}
            rows="20"
            control="textarea"
            onChange={this.handleChangeContent}
          />
          {this.renderRedirect()}
          <Form.Button content="Submit" />
        </Form>
      </Container>
    );
  }
}

export default Post;

package main

import (
	"database/sql"
	"log"
	"net/http"

	"github.com/gin-gonic/gin"
	_ "github.com/go-sql-driver/mysql"
)

type Article struct {
	ID      int    `json:"id"`
	TITLE   string `json:"title"`
	CONTENT string `json:"content"`
}

var articles []Article

func main() {

	db, err := sql.Open("mysql", "user:password@tcp(localhost:3306)/article")
	if err != nil {
		panic(err.Error())
	}
	defer db.Close()

	err = db.Ping()
	if err != nil {
		panic(err.Error())
	}

	router := gin.Default()

	api := router.Group("/api")
	{
		api.POST("/post", func(c *gin.Context) {
			var article Article
			c.BindJSON(&article)
			c.Header("Content-Type", "application/json")
			c.Header("Access-Control-Allow-Origin", "*")
			c.Writer.Header().Set("Access-Control-Allow-Headers", "Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization")
			ins, err := db.Prepare("INSERT INTO articles(title,content) VALUES(?,?)")
			if err != nil {
				log.Fatal(err)
			}
			ins.Exec(article.TITLE, article.CONTENT)
			c.JSON(http.StatusOK, gin.H{"status": "ok"})
		})
	}

	router.Run(":4000")
}

試したこと

試しに以下のcurlを叩いたところ正常にローカルのmysqlテーブルに登録されました

curl -X POST -H "Content-Type: application/json" -d '{"title":"bbb", "content":"bbb"}' localhost:4000/api/post

以上、お手数ですがご教授いただけると幸いです。

Answer 1

OPTIONS requestに対応するように修正したところ解決しました。

        api.POST("/post", func(c *gin.Context) {
            c.Header("Content-Type", "application/json")
            c.Header("Access-Control-Allow-Origin", "*")
            // add 
            c.Header("Access-Control-Allow-Headers", "Content-Type")
            var article Article
            c.BindJSON(&article)
            ins, err := db.Prepare("INSERT INTO articles(title,content) VALUES(?,?)")
            if err != nil {
                log.Fatal(err)
            }
            ins.Exec(article.TITLE, article.CONTENT)
            c.JSON(http.StatusOK, gin.H{"status": "ok"})
        })
        // add response to OPTIONS
        api.OPTIONS("/post", func(c *gin.Context) {
            c.Header("Content-Type", "application/json")
            c.Header("Access-Control-Allow-Origin", "*")
            c.Header("Access-Control-Allow-Headers", "Content-Type")
            c.JSON(http.StatusOK, gin.H{"status": "ok"})
        })

同内容の質問をstackoverflowにして解決に至りました。

Comments

[set0gut1]

OPTIONSリクエストに対応するエンドポイントはcors設定をちゃんとやると生えるものなので、gin-gonicの機能を自然に使ったほうが楽だろうとは思います。あと Access-Control-Allow-Origin: * は全アクセス元許可の意なので、ちゃんとフロントエンドとして想定しているhostを入れたほうがセキュリティ的に良いと思います。

Answer 2

フロントエンドとバックエンドのhost（hostname+port）が違う場合、特別な設定をしないとブラウザのセキュリティ防御によりリクエストが行われないです。詳細は「CORS」でググるとよくまとまった記事が出てくるのでそちらをご参照ください。

gin-gonicのcors設定は次のあたりに書いてあります。
https://github.com/gin-contrib/cors

今回、開発環境でのアクセス元（ブラウザ側）がlocalhost:3000ということなので、これをAllowOriginsに指定すればオッケーです。
本番環境にデプロイするときにはちゃんと書き換えておく必要があるので注意してください。