IONIC CORS 预检具有无效的 HTTP答案

【问题标题】：IONIC CORS preflight has invalid HTTPIONIC CORS 预检具有无效的 HTTP
【发布时间】：2018-05-24 14:29:15
【问题描述】：

我正在尝试在我的离子应用程序上向我的服务器发出请求。我在服务器上启用了 cors。在 ionic serve --lab: 我提出请求时，它不起作用。 GET 请求有效，但 POST 无效。

  register(username: string, email: string, password: string) {
    var header = new Headers();
    header.append("Accept", "application/json");
    header.append("Content-Type", "application/json" );
    let options = new RequestOptions({ headers: header });

    var body = {
      name: username,
      email: email,
      password: password
    };

    var senderBody = JSON.stringify(body);

    console.log(body, senderBody)
    return new Promise((resolve, reject) => {
      this.http.post("http://54.233.195.52:8080/user_parent", senderBody, options)
        .map(res => res.json())
        .subscribe(data => {
          resolve(data)
        }, error => {
          console.log(error)
          reject(error)
        });
    });
  }

我这样称呼它：

  register(){
    this.authPrvd.register(this.name,this.email,this.password)
    .then(value => {
      console.log(value);
    }, reason =>{
      console.log(reason)
    })
  }

我希望得到一个json，结果如下：

{
    "id": 4,
    "name": "naaame",
    "email": "emaaail",
    "password": "<encrypted password>",
    "facebook_id": "",
    "address_postal": "",
    "address_street": "",
    "address_number": 0,
    "address_complement": "",
    "cpf": "",
    "rg": "",
    "phone1": "",
    "phone2": "",
    "profile_image_url": "",
    "extra_info": "",
    "created_at": "2017-12-11T02:18:42.862478082Z",
    "updated_at": "2017-12-11T02:18:42.862478082Z"
}

该请求确实适用于邮递员。但是当离子服务时它不起作用

我尝试使用 chrome 扩展来允许-控制-允许-来源：*

我的 cors 是在服务器上配置的：（go(lang) 中的服务器）

func SetDBtoContext(db *gorm.DB) gin.HandlerFunc {
    return func(c *gin.Context) {
        c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
        c.Writer.Header().Set("Access-Control-Allow-Headers", "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, Origin")
        c.Writer.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE")

        c.Set("DB", db)
        c.Next()
    }
}

控制台给出的错误是

选项http://54.233.195.52:8080/user_parent 404（未找到）失败加载http://54.233.195.52:8080/user_parent：预检响应具有无效的 HTTP 状态代码 404

检查我得到的控制台：

编辑：由于某种原因，urlencoded 有效，但 json 无效

【问题讨论】：

标签： typescript post http-headers cors ionic3

【解决方案1】：

所以我发现了遇到此类问题的人的情况。我必须创建对方法 OPTION 的请求的响应，该方法的标头中也包含允许标头方法。像这样的

v1.OPTIONS("/users", OptionsUser)      // POST
v1.OPTIONS("/users/:id", OptionsUser)  // PUT, DELETE



func OptionsUser(c *gin.Context) {
    c.Writer.Header().Set("Access-Control-Allow-Methods", "DELETE,POST, PUT")
    c.Writer.Header().Set("Access-Control-Allow-Headers", "Content-Type")
    c.Next()
}

摘自：https://medium.com/@etiennerouzeaud/how-to-create-a-basic-restful-api-in-go-c8e032ba3181

事情是：angular 和 ionic http 基本方法在发送 POST 之前创建 OPTION 类型的预检。我只需要处理它...

【讨论】：

【解决方案2】：

我所做的只是处理 OPTIONS 请求以及以下 -

    router := mux.NewRouter()
    router.HandleFunc("/rpc", Preflight).Methods("OPTIONS")

func Preflight(w http.ResponseWriter, r *http.Request) {

    w.Header().Set("Access-Control-Allow-Origin", "*")

    w.Header().Set("Access-Control-Allow-Headers", "*")
    // return "OK"
    json.NewEncoder(w).Encode("OK")

}

并在任何 GET 请求中添加

 w.Header().Set("Access-Control-Allow-Origin", "*")

【讨论】：