客戶端（React/axios.post）無法發(fā)布到服務(wù)器端 api（Golang/gin），狀態(tài)代碼為 404。我想讓這個發(fā)布請求成功。如下curl成功將數(shù)據(jù)寫入mysql表中curl -X POST -H "Content-Type: application/json" -d '{"title":"bbb", "content":"bbb"}' localhost:4000/api/post但是，如果使用 axios.post，則會出現(xiàn) 404 錯誤。這是目標源代碼。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" name="title" value={this.state.title} onChange={this.handleChangeTitle} /> <Form.Field label="Content" name="content" value={this.state.content} control="textarea" onChange={this.handleChangeContent} /> {this.renderRedirect()} <Form.Button content="Submit" /> </Form> </Container> ); }}
3 回答
神不在的星期二
TA貢獻1963條經(jīng)驗 獲得超6個贊
這是我測試過的工作代碼：
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", "root:111111@tcp(localhost:3306)/article")
if err != nil {
panic(err.Error())
}
defer db.Close()
router := gin.Default()
router.Use(cors.New(cors.Config{
AllowOrigins: []string{"*"},
AllowMethods: []string{"GET", "POST", "OPTIONS"},
AllowHeaders: []string{"Content-Type", "Content-Length", "Accept-Encoding", "X-CSRF-Token", "Authorization", "accept", "origin", "Cache-Control", "X-Requested-With"},
ExposeHeaders: []string{"Content-Length"},
AllowCredentials: true,
AllowOriginFunc: func(origin string) bool {
return true
},
MaxAge: 15 * time.Second,
}))
api := router.Group("/api")
{
api.POST("/post", func(c *gin.Context) {
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"})
})
}
router.Run(":4000")
}
慕碼人8056858
TA貢獻1803條經(jīng)驗 獲得超6個贊
正如錯誤所示，請求“已被 CORS 策略阻止”，CORS 策略是“跨域資源共享”的縮寫，是瀏覽器實施的一項安全措施。解決方案是修改您的服務(wù)器以返回正確的“Access-Control-Allow-Origin”標頭。
翻閱古今
TA貢獻1780條經(jīng)驗 獲得超5個贊
在服務(wù)器端添加一些代碼后，問題得到解決。
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"})
})
- 3 回答
- 0 關(guān)注
- 373 瀏覽
添加回答
舉報
0/150
提交
取消