Q&A
回答ありがとうございます！
ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com', 'localhost']
となっています。
ALLOWED_HOSTS = ['*']
でも動かずです…
前提・実現したいこと
ReactとDjangoでブログを作っています。
commentAPIをDjango REST frameworkで実装した。
Reactプロジェクト上でaxiosを用いてjsonをpostしようとするも失敗。
400 (Bad Request)と表示され、jsonの形式がおかしいのではないかと推測したが、原因がわからず。
発生している問題・エラーメッセージ
400 (Bad Request)
####エラーが出ている画面
####API
authorはユーザを選びます。
今のところsuperuserのadminだけです。
target_postでどのポストにコメントするかをきめます。
####terminal
該当のソースコード
####ツリー構造(staticやtemplateは使用していません。)
terminal
1C:. 2│ docker-compose.yml 3│ 4├─backend 5│ │ Dockerfile 6│ │ manage.py 7│ │ requirements.txt 8│ │ 9│ ├─blog 10│ │ │ admin.py 11│ │ │ apps.py 12│ │ │ forms.py 13│ │ │ models.py 14│ │ │ permissions.py 15│ │ │ serializers.py 16│ │ │ tests.py 17│ │ │ urls.py 18│ │ │ views.py 19│ │ │ __init__.py 20│ │ │ 21│ │ ├─migrations 22│ │ │ │ 0001_initial.py 23│ │ │ │ 0002_comment.py 24│ │ │ │ 0003_auto_20190711_0907.py 25│ │ │ │ __init__.py 26│ │ │ │ 27│ │ │ └─__pycache__ 28│ │ │ 0001_initial.cpython-37.pyc 29│ │ │ 0002_comment.cpython-37.pyc 30│ │ │ 0003_auto_20190711_0907.cpython-37.pyc 31│ │ │ __init__.cpython-37.pyc 32│ │ │ 33│ │ ├─static 34│ │ │ └─css 35│ │ │ blog.css 36│ │ │ 37│ │ ├─templates 38│ │ │ └─blog 39│ │ │ base.html 40│ │ │ post_detail.html 41│ │ │ post_edit.html 42│ │ │ post_list.html 43│ │ │ 44│ │ └─__pycache__ 45│ │ admin.cpython-37.pyc 46│ │ apps.cpython-37.pyc 47│ │ forms.cpython-37.pyc 48│ │ models.cpython-37.pyc 49│ │ permissions.cpython-37.pyc 50│ │ serializers.cpython-37.pyc 51│ │ urls.cpython-37.pyc 52│ │ views.cpython-37.pyc 53│ │ __init__.cpython-37.pyc 54│ │ 55│ └─mysite 56│ │ settings.py 57│ │ urls.py 58│ │ wsgi.py 59│ │ __init__.py 60│ │ 61│ └─__pycache__ 62│ settings.cpython-37.pyc 63│ urls.cpython-37.pyc 64│ wsgi.cpython-37.pyc 65│ __init__.cpython-37.pyc 66│ 67└─frontend 68 │ .gitignore 69 │ Dockerfile 70 │ package.json 71 │ README.md 72 │ yarn.lock 73 │ 74 ├─public 75 │ favicon.ico 76 │ index.html 77 │ manifest.json 78 │ 79 └─src 80 │ App.css 81 │ App.js 82 │ App.test.js 83 │ index.css 84 │ index.js 85 │ routes.js 86 │ serviceWorker.js 87 │ 88 ├─components 89 │ Article.js 90 │ Form.js 91 │ 92 └─containers 93 ArticleDetailView.js 94 ArticleListView.js 95 Layout.js
####ElectronicJournal/frontend/src/components/Form.js
js
1import React from 'react'; 2 3import { Form, Input, Button } from 'antd'; 4import axios from 'axios'; 5 6class CustomForm extends React.Component { 7 8 9 handleFormSubmit = (event, requestType) => { 10 event.preventDefault(); 11 const name = event.target.elements.name.value; 12 const comment = event.target.elements.comment.value; 13 14 console.log("name: ", name); 15 console.log("comment: ", comment); 16 console.log("target_post: ", this.props.target_post); 17 18 console.log(axios.post('http://127.0.0.1:8000/api/v1/comment/', { 19 author: name, 20 target_post: this.props.target_post, 21 comment: comment 22 })); 23 24 switch(requestType) { 25 case 'post': 26 return axios.post('http://127.0.0.1:8000/api/v1/comment/', { 27 author: name, 28 target_post: this.props.target_post, 29 comment: comment 30 }).then(res => console.log(res)) 31 .catch(error => console.error(error)); 32 case 'put': 33 return axios.put('http://127.0.0.1:8000/api/v1/comment/', { 34 author: name, 35 target_post: this.props.target_post, 36 comment: comment 37 }).then(res => console.log(res)) 38 .catch(error => console.error(error)); 39 } 40 } 41 42 render() { 43 return ( 44 <div> 45 <Form onSubmit={(event) => this.handleFormSubmit( 46 event, 47 this.props.requestType, 48 )}> 49 <Form.Item label="Name"> 50 <Input name="name" placeholder="Put your name here..." /> 51 </Form.Item> 52 <Form.Item label="Comment"> 53 <Input name="comment" placeholder="Enter some text..." /> 54 </Form.Item> 55 <Form.Item> 56 <Button type="primary" htmlType="submit">Submit</Button> 57 </Form.Item> 58 </Form> 59 </div> 60 ); 61 } 62} 63 64export default CustomForm; 65
####ElectronicJournal/frontend/src/containers/ArticleDetailView.js
これがForm.jsからCustomFormを呼び出しています。
js
1import React from 'react'; 2import axios from 'axios'; 3 4import { Card } from 'antd'; 5import CustomForm from '../components/Form' 6 7class ArticleDetail extends React.Component { 8 9 state = { 10 article: {} 11 } 12 13 componentDidMount() { 14 const articleID = this.props.match.params.articleID; 15 axios.get(`http://127.0.0.1:8000/api/v1/${articleID}`) 16 .then(res => { 17 this.setState({ 18 article: res.data 19 }); 20 console.log('res.data:', res.data); 21 }) 22 } 23 24 render() { 25 console.log("this.state.article.txt", this.state.article.text); 26 return ( 27 <Card title={this.state.article.title}> 28 <p>{this.state.article.text}</p> 29 <br /> 30 <h2>Add New Comment</h2> 31 <CustomForm 32 requestType="post" 33 target_post={this.state.article.title}/> 34 </Card> 35 ); 36 } 37} 38 39export default ArticleDetail;
試したこと
ソースコードにあるようにconsole.log()を使っていろいろ出力してみたが、内容はほとんど400 Bad Requestだった。
補足情報
Django2
React
PostgreSQL
django-cors-headers
axios
react-router-dom
antd
回答2件
0
自己解決
ArticleDetailView.jsのこの部分を
js
1 <CustomForm 2 requestType="post" 3 target_post={this.state.article.title}/> 4 </Card>
このようにすることで解決しました。
js
1 <CustomForm 2 requestType="post" 3 target_post={this.state.article.id}/> 4 </Card>
target_postは記事の名前で指定されていると勘違いしていたのですが、APIの画面をよく見るとidで指定されていました。
投稿2019/07/23 06:28
総合スコア15
0
djangoの設定ファイル(settings.py)のALLOWED_HOSTSはなにになっていますでしょうか？
ALLOWED_HOSTS = ['127.0.0.1', 'localhost']
or
ALLOWED_HOSTS = ['*']
にしたら動くかもしれません。(もし違ったらすいません。)
投稿2019/07/20 09:01
総合スコア240
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。