预检不通过控制检查访问控制允许来源不存在

Question

我有一个简单的客户端在React中运行。我正在尝试使用Axios向我已在本地运行的Go服务器发出GET请求。该阵营的代码在端口3000上运行，于4000

转到服务器如果我粘贴GET请求本身在浏览器窗口中正常工作：http://localhost:4000/numberconverter?number=10&oldBase=10&newBase=2

我做了一些研究，发现this post，但插件和Chrome选项不起作用。这不是我所做的唯一研究，但似乎是最有前途的。我发现的大部分内容都不涉及Go服务器。

我也发现this post，但那也没有解决我的问题。如果我取消注释服务器中的代码，它仍会失败。

如果我更改允许的方法：

writer.Header().Set("Access-Control-Allow-Methods", "GET, POST, PATCH, PUT, DELETE, OPTIONS") 

它失败，出现405错误。服务器打印出这一点：

&{0xc4200f4000 0xc42000a500 {} 0x10ec430 true false false false 0xc4200143c0 {0xc420100000 map[Access-Control-Allow-Origin:[*] Access-Control-Allow-Methods:[GET, POST, PATCH, PUT, DELETE, OPTIONS] Content-Type:[text/plain; charset=utf-8] X-Content-Type-Options:[nosniff]] false false} map[Access-Control-Allow-Origin:[*] Access-Control-Allow-Methods:[GET, POST, PATCH, PUT, DELETE, OPTIONS] Content-Type:[text/plain; charset=utf-8] X-Content-Type-Options:[nosniff]] true 19 -1 405 false false [] 0 [0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0] [0 0 0 0 0 0 0 0 0 0] 0xc4200620e0 0} 

我想我的问题是，这是否是在服务器端或客户端的问题，以及我怎么能解决这个问题？

客户：

import React, {Component} from 'react'; 
import axios from 'axios'; 

class Converter extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      // number: 0, 
      // base: 10, 
      // newBase: 10 
     }; 
     this.convertButtonPressed = this.convertButtonPressed.bind(this); 
     this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(event) { 
     const target = event.target; 
     const value = target.value; 
     const name = target.name; 

     this.setState({ 
     [name]: value 
     }); 
    } 

    convertButtonPressed(event) { 
     axios({ 
      method: 'GET', 
      baseURL: 'http://localhost:4000/', 
      url: '/numberconverter', 
      headers: { 
       'Access-Control-Allow-Origin': '*', 
       'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS', 
       'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token' 
      }, 
      params: { 
      number: this.state.number, 
      oldBase: this.state.base, 
      newBase: this.state.newBase 
      } 
     }); 
    } 

    render() { 
     return (
     <div className="App"> 
      <p>Number Converter</p> 
      <div> 
      Number: 
      <input name="number" onChange={this.handleChange} type="text" placeholder="Number"></input><br /> 
      Base: 
      <input name="base" onChange={this.handleChange} type="text" placeholder="Base"></input><br /> 
      New Base: 
      <input name="newBase" onChange={this.handleChange} type="text" placeholder="New Base"></input><br /> 
      </div> 
      <button onClick={this.convertButtonPressed}>Convert</button> 
     </div> 
     ); 
    } 
} 

export default Converter; 

服务器：

package rest 

// Example: 
// http://localhost:3000/numberconverter?number=500000&oldBase=10&newBase=16 

import (
    "fmt" 
    "log" 
    "net/http" 

    "../converter" 
) 

// Start starts the server 
func Start() { 
    //muxRouter := http.NewServeMux() 
    //muxRouter.HandleFunc("/numberconverter", numberconverter) 
    //http.Handle("/", muxRouter) 
    http.HandleFunc("/numberconverter", numberconverter) 
    log.Fatal(http.ListenAndServe(":4000", nil)) 
} 

func numberconverter(writer http.ResponseWriter, response *http.Request) { 
    //writer.Header().Set("Access-Control-Allow-Origin", "*") 
    //writer.Header().Set("Access-Control-Allow-Methods", "*") 
    //writer.Header().Set("Content-Type", "text/html; charset=utf-8") 

    // Check if the method is a get 
    if response.Method != http.MethodGet { 
     http.Error(writer, http.StatusText(405), 405) 
     fmt.Println(writer) 
     return 
    } 

    number := response.FormValue("number") 
    oldBase := response.FormValue("oldBase") 
    newBase := response.FormValue("newBase") 
    result := converter.ConvertStringNumberToNewBase(number, oldBase, newBase) 
    fmt.Fprintf(writer, "%s base %s is %s in base %s", number, oldBase, result, newBase) 
} 

Answer 1

有一次，我在代码做出反应GET请求工作注释掉头。我想感谢sideshowbarker的答案。对此，我真的非常感激。

convertButtonPressed(event) { 
    axios({ 
     method: 'GET', 
     baseURL: 'http://localhost:4000/', 
     url: '/numberconverter', 
     // headers: { 
     //  'Access-Control-Allow-Origin': '*', 
     //  'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS', 
     //  'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token' 
     // }, 
     params: { 
      number: this.state.number, 
      oldBase: this.state.base, 
      newBase: this.state.newBase 
     } 
     }); 
}