Rest 飞行前不';t通过控制检查访问控制允许原点不存在
我有一个简单的客户端正在运行。我正在尝试使用Axios向本地运行的Go服务器发出GET请求。React代码在端口3000上运行,Go服务器在4000上运行 如果我将GET请求本身粘贴到浏览器窗口中,它将正常工作: 我做了一些研究并发现,但是插件和Chrome选项没有帮助。这不是我做过的唯一一项研究,但这似乎是最有希望的。我发现的大多数东西都不涉及Go服务器 我也发现了,但这也没有解决我的问题。如果我在服务器中取消对代码的注释,它仍然会失败 如果我将允许的方法更改为:Rest 飞行前不';t通过控制检查访问控制允许原点不存在,rest,reactjs,go,cors,preflight,Rest,Reactjs,Go,Cors,Preflight,我有一个简单的客户端正在运行。我正在尝试使用Axios向本地运行的Go服务器发出GET请求。React代码在端口3000上运行,Go服务器在4000上运行 如果我将GET请求本身粘贴到浏览器窗口中,它将正常工作: 我做了一些研究并发现,但是插件和Chrome选项没有帮助。这不是我做过的唯一一项研究,但这似乎是最有希望的。我发现的大多数东西都不涉及Go服务器 我也发现了,但这也没有解决我的问题。如果我在服务器中取消对代码的注释,它仍然会失败 如果我将允许的方法更改为: writer.Header(
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;
一旦我注释掉React代码中的头,GET请求就开始工作了。我要感谢你的回答。我真的很感激
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
}
});
}
如果取消注释这些标题设置行,它是否有效?解决这个问题,浏览器扩展绝对是错误的。您的任何用户都不会拥有它们。IIRC,
访问控制允许方法
不能是*
。它应该是一个方法列表。如果我取消注释那些行,它可能会重复@captncraig,但仍然不起作用。这些行是我试图解决问题时写的。前端代码添加的这些标题会触发浏览器在尝试代码要发送的GET请求之前自动执行COR飞行前选项请求,因为在发送请求的服务器的后端代码中,你让它做if response.Method!=http.MethodGet{http.Error(writer,http.StatusText(405),405)…}
,当浏览器发送飞行前选项时会命中该错误&飞行前失败&浏览器永远不会继续尝试从代码中获取
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
}
});
}