英文:
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),
      })
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。


评论