axios 和 reactjs：预检响应具有无效的 HTTP 状态代码 400
Posted
技术标签:
【中文标题】axios 和 reactjs：预检响应具有无效的 HTTP 状态代码 400【英文标题】：axios and reactjs: Response for preflight has invalid HTTP status code 400 【发布时间】：2018-09-06 22:00:18 【问题描述】：我有一个使用 reactjs 和 axios 制作的 index.html。它是从我的 apache localhost 提供的。
我正在我的 chrome 浏览器中打开链接 http://localhost/~user/index.html。我已经使用 chrome 中的插件启用了 CORS。
当我尝试将 axios 与 twitter api 一起使用时，我得到：
Response for preflight has invalid HTTP status code 400
下面是axios的代码：
var url = 'https://api.twitter.com/1.1/search/tweets.json';
axios(
url: url,
method:'get',
q:'twitterapi',
json:'true',
headers:
"Authorization": "Bearer "+this.state.bearer_token,
'Content-Type' : 'application/json'
)
.then(function(response)
this.setState(prevState => (
get_json: response
)
)
)
.catch(function(error)
console.log(error);
);
index.html的完整代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Twitter API</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Module extends React.Component
constructor(props)
super(props);
this.state =
bearer_token:"&&&&&&&&&&&&&***************++++++++++++++++++++++++++++",
get_json:""
this.handleClickGetJSON = this.handleClickGetJSON.bind(this)
handleClickGetJSON()
var url = 'https://api.twitter.com/1.1/search/tweets.json';
axios(
url: url,
method:'get',
q:'twitterapi',
headers:
"Authorization": "Bearer "+this.state.bearer_token,
'Content-Type' : 'application/json'
)
.then(function(response)
this.setState(prevState => (
get_json: response
)
)
)
.catch(function(error)
console.log(error);
);
render()
return (
<div>
<p> this.state.bearer_token </p>
<p> this.state.get_json </p>
<button onClick=this.handleClickGetJSON>GetBearerToken</button>
</div>
);
ReactDOM.render(
<Module />,
document.getElementById('root')
);
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：对于预检请求，您应该有以下两个标头：
访问控制请求方法：GET/POST/OPTIONS Access-Control-Request-Headers：您希望在请求中传递的标头。这些请求标头正在向服务器请求发出实际请求的权限。您的预检响应需要确认这些标头才能使实际请求生效。
对于跨域调用，浏览器通常会在实际调用之前进行 OPTIONS 调用。您的服务器基本上需要允许该方法。
【讨论】：
我明白了。现在我必须从浏览器以外的后端获取 api。比如 curl 等 我只对 axios POST 请求有同样的问题。我收到“飞行前响应具有无效的 http 状态代码”。我在我的 API 的 CORSMiddleware 中添加了上面提到的标头。更多信息请参考***.com/questions/51379356/…。以上是关于axios 和 reactjs：预检响应具有无效的 HTTP 状态代码 400的主要内容，如果未能解决你的问题，请参考以下文章
预检响应具有无效的 HTTP 状态代码 400 - aspx
预检响应具有无效的 HTTP 状态代码 401 - Spring