Question

我正在对我创建的API（在Golang中）进行axios调用。该API似乎可以在Postman上正常运行，但是由于某些原因，当我通过React进行调用时，该API无法正常工作。

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无法正常工作。

Answer 1

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

您可以查看此帖子enable-cors-in-golang

Answer 2

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

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

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

Answer 3

卸载后，我在系统上重新安装了NodeJS，现在似乎可以使用相同的代码。我当时在WSL Ubuntu上，所以从他们的角度来看这可能是一个错误！

Axios PUT请求无效，但GET有效

3 个答案: