預檢不通過控制檢查訪問控制允許來源不存在

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 
     } 
     }); 
}