Axios PUT 请求无效，但 GET 有效答案

【问题标题】：Axios PUT request not working, but GET worksAxios PUT 请求无效，但 GET 有效
【发布时间】：2020-09-27 05:46:03
【问题描述】：

我正在对我创建的 API（在 Golang 中）进行 axios 调用。 API 似乎在 Postman 上按预期工作，但由于某种原因，当我通过 React 进行调用时它不起作用。

import React, {Component} from "react";
import Form from "./Form";
import Header from "./Header";
import axios from "axios";

let endpoint = "http://localhost:8000/";

class Dashboard extends Component {
    constructor(props){
        super(props)
        this.state = {
            currentRepository: '',
            data: {},
        }
        this.setRepository = this.setRepository.bind(this)
    }
    
    componentDidMount(){
        axios.get(
            endpoint,
            {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          console.log(res);
        });
    }

    setRepository(url){
        console.log(url)
        this.setState({
            currentRepository: url,
        }, () => {
            axios.put(
                endpoint, 
                this.state.currentRepository, {
                headers: {
                  "Content-Type": "application/json"
                }
              }
            )
            .then(res => {
              this.setState({
                  data: res
              })
              console.log(res);
            })
        })
    }

    render(){
        return (
            <div className="m-5 border-2">
                <Header></Header>
                <Form setRepository={this.setRepository}></Form>
            </div>
        )
    }
}

export default Dashboard;

我在控制台中遇到的错误是，

现在，我仔细检查了一遍，我已经提到了所有必需的访问控制选项。我的一段后端 golang 代码：

func getHome(w http.ResponseWriter, r *http.Request) {
    commitTimeStamps := getCommitTimeStamps(currentRepository)
    commitTimeObjects := parseTimeStamps(commitTimeStamps)

    w.Header().Set("Content-Type", "application/json")
    w.Header().Set("Access-Control-Allow-Origin", "*")
    w.Header().Set("Access-Control-Allow-Methods", "GET")
    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")

    _ = json.NewEncoder(w).Encode(commitTimeObjects)
}



func updateRepository(w http.ResponseWriter, r *http.Request) {
    var url struct {
        URL string `json:"url"`
    }
    _ = json.NewDecoder(r.Body).Decode(&url)
    currentRepository = parseURL(&url.URL)
    
    // currentRepository looks like {bradtraversy reactcharts}
    commitTimeStamps := getCommitTimeStamps(currentRepository)
    commitTimeObjects := parseTimeStamps(commitTimeStamps)
    // commitTimeObjects looks like [{2016-04-21 2} {2016-04-23 5} {2016-04-25 1}]
    w.Header().Set("Content-Type", "application/json")
    w.Header().Set("Access-Control-Allow-Origin", "*")
    w.Header().Set("Access-Control-Allow-Methods", "PUT")
    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")

    _ = json.NewEncoder(w).Encode(commitTimeObjects)
}

func main() {
    router := mux.NewRouter()
    router.Use(mux.CORSMethodMiddleware(router))
    router.HandleFunc("/", getHome).Methods("GET", "OPTIONS")
    router.HandleFunc("/", updateRepository).Methods("PUT", "OPTIONS")

    http.ListenAndServe(":8000", router)
}

我不明白问题出在哪里，有一点帮助会很棒。谢谢。

更新：

用 POST 替换 PUT 即可。但仍然无法理解为什么 PUT 不起作用。

【问题讨论】：

你能在前端的标题中试试这个吗：Access-Control-Allow-Methods: POST, PUT, GET, OPTIONS
我将它添加到 axios 的标题中，但随后 GET 也停止工作
我的错误 Access-Control-Allow-Methods 是响应头。不起作用。试试这个：``` axios.get(url, { crossdomain: true }) ```
如果不使用返回值，CORSMethodMiddleware 调用的目的是什么？因为现在它没有任何效果，所以不清楚你认为代码应该做什么。
@ShubhamVerma 不起作用。 GET 和 PUT 的工作方式与以前完全相同。

标签： json reactjs go axios

【解决方案1】：

CORS 会执行向任何 URL 发送 OPTIONS 请求的飞行前请求，因此要处理 POST 请求，您首先需要处理对同一 URL 的 OPTIONS 请求。在 GET 端点上，这不是问题，但它适用于 POST 和 PUT 和 DELETE 请求。

你可以查看这个帖子enable-cors-in-golang

【讨论】：

【解决方案2】：

这绝对是一个 CORS 问题。没有 CORS 支持 GET 和 POST。但 PUT、PATCH、DELETE 需要飞行前请求并在您的 golang 服务器上设置 CORS。

如果您在网络控制台中查看错误，它也会显示 - 1. 它已被 CORS 策略阻止 2. 不允许使用 PUT 方法。

这是一个很好的软件包，可以安装到您的 api 中并在您的端点上启用 CORS： https://pkg.go.dev/github.com/rs/cors

【讨论】：

【解决方案3】：

卸载后我在我的系统上重新安装了 NodeJS，并且现在似乎可以使用相同的代码。我在 WSL Ubuntu 上，所以这可能是他们这边的错误！

【讨论】：