英文:
CORS golang echo framework
问题
我有以下Go代码:
package main
import (
"database/sql"
"encoding/json"
"fmt"
"net/http"
_ "github.com/go-sql-driver/mysql"
"github.com/labstack/echo"
"github.com/labstack/echo/middleware"
)
func main() {
// Echo实例
e := echo.New()
// 中间件
e.Use(middleware.Logger())
e.Use(middleware.Recover())
e.Use(middleware.CORS())
e.POST("/createuser", addUser)
e.Logger.Fatal(e.Start(":4000"))
}
以及Vue.js的fetch脚本:
const res = await fetch('https://localhost:4000/createuser', {
method: 'POST',
headers: {
'Content-type': 'application/json',
'Access-Control-Allow-Origin': '*',
},
body: JSON.stringify(nameAndPhone),
})
在执行时,我的Firefox控制台中出现以下错误:
Extraneous request blocked: Single source policy denies reading remote resource at https://localhost:4000/createuser (Reason: Failed to complete CORS request).
Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.
我的网络选项卡显示:
Blocked OPTIONS localhost:4000 createuser fetch CORS failed 0byte
Blocked POST localhost:4000 createuser fetch NS_ERROR_DOM_BAD_URI 0byte
它在Postman中可以工作,但在浏览器中由于CORS而无法工作。为什么即使我已经在代码中使用了e.Use(middleware.CORS())
,它仍然无法工作?
英文:
I have next Go code:
package main
import (
"database/sql"
"encoding/json"
"fmt"
"net/http"
_ "github.com/go-sql-driver/mysql"
"github.com/labstack/echo"
"github.com/labstack/echo/middleware"
)
func main() {
// Echo instance
e := echo.New()
// Middleware
e.Use(middleware.Logger())
e.Use(middleware.Recover())
e.Use(middleware.CORS())
e.POST("/createuser", addUser)
e.Logger.Fatal(e.Start(":4000"))
}
And Vue js fetch script
const res = await fetch('https://localhost:4000/createuser', {
method: 'POST',
headers: {
'Content-type': 'application/json',
'Access-Control-Allow-Origin': '*',
},
body: JSON.stringify(nameAndPhone),
})
Errors in my Firefox console when executing it
Extraneous request blocked: Single source policy denies reading remote resource at https://localhost:4000/createuser (Reason: Failed to complete CORS request).
Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.
My Network tab:
Blocked OPTIONS localhost:4000 createuser fetch CORS failed 0byte
Blocked POST localhost:4000 createuser fetch NS_ERROR_DOM_BAD_URI 0byte
It works in Postman, but doesn't work from browser because of CORS. Why doesn't it work if I already have e.Use(middleware.CORS())
in my code?
答案1
得分: 4
请按照下面的示例进行操作。
e := echo.New()
e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
AllowOrigins: []string{"*"},
AllowHeaders: []string{echo.HeaderOrigin, echo.HeaderContentType, echo.HeaderAccept},
}))
英文:
Please follow the next example.
e := echo.New()
e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
AllowOrigins: []string{"*"},
AllowHeaders: []string{echo.HeaderOrigin, echo.HeaderContentType, echo.HeaderAccept},
}))
答案2
得分: 1
问题是我从 https
获取而不是 http
修复后的 JavaScript 代码:
const res = await fetch('http://localhost:4000/createdebter', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-type': 'application/json',
},
body: JSON.stringify(nameAndPhone),
})
英文:
The problem was I was fetching from https
and not http
Fixed js:
const res = await fetch('http://localhost:4000/createdebter', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-type': 'application/json',
},
body: JSON.stringify(nameAndPhone),
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论