Javascript Cors错误,与axios反应,但与fetch不反应
我正在尝试从react前端查询我的Azure搜索门户。我已启用正确索引上的所有COR。当我用fetch查询时,我得到的数据很好,但是当我用axios查询时,我得到了以下错误 从源代码访问“maskedurl”处的XMLHttpRequesthttp://localhost:3000'已被CORS策略阻止:对飞行前请求的响应未通过访问控制检查:请求的资源上不存在'access control Allow Origin'标头 这是我的组件Javascript Cors错误,与axios反应,但与fetch不反应,javascript,reactjs,azure,axios,Javascript,Reactjs,Azure,Axios,我正在尝试从react前端查询我的Azure搜索门户。我已启用正确索引上的所有COR。当我用fetch查询时,我得到的数据很好,但是当我用axios查询时,我得到了以下错误 从源代码访问“maskedurl”处的XMLHttpRequesthttp://localhost:3000'已被CORS策略阻止:对飞行前请求的响应未通过访问控制检查:请求的资源上不存在'access control Allow Origin'标头 这是我的组件 import React from 'react'; imp
import React from 'react';
import azure from '../apis/azure';
class GeoSearch extends React.Component {
state = {
lat: '',
lon: ''
}
componentDidMount(){
window.navigator.geolocation.getCurrentPosition(
position => this.setState({ lat: position.coords.latitude, lon: position.coords.longitude }),
err => this.setState({ errorMessage: err.message }),
);
};
onNavLoad = async (lon, lat) => {
const response = await azure.post('/', {
params: {
"filter": "geo.distance(Location, geography'POINT(-6.184120 53.605190)') le 4",
"Access-Control-Allow-Origin": "*"
},
headers: {
'api-key': 'apikeymasked',
"Access-Control-Allow-Origin": "*"
},
});
console.log(response);
}
render() {
if (this.state.lat){
return (
<div>
<h1>Geo Search</h1>
<div>{this.state.lon}</div>
<div>{this.state.lat}</div>
<button onClick={this.onNavLoad}>Click</button>
</div>
)
}
return (
<div>
<h1>Geo Search Loading</h1>
</div>
);
}
}
export default GeoSearch;
这不管用
然而,当我将onNavLoad函数中的axios切换到类似这样的fetch时,它可以完美地工作
onNavLoad = async (lon, lat) => {
var myHeaders = new Headers();
myHeaders.append("api-key", "apikeymasked");
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify({"search":"","filter":"geo.distance(Location, geography'POINT(-6.184120 53.605190)') le 50","select":"name","count":"true"});
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
const response = fetch("maskedurl", requestOptions)
.then(response => response.json())
.then(result => console.log(result.value))
.catch(error => console.log('error', error));
console.log(response);
}
有什么想法吗?通常是服务器站点问题,但您可以使用PROXYURL从客户端覆盖此问题
const proxyURL=”https://cors-anywhere.herokuapp.com/";
const requestURL=您的URL;
const response=fetch(proxyURL+requestURL,requestOptions)
我在axios下看到了这个问题:
onNavLoad = async (lon, lat) => {
var myHeaders = new Headers();
myHeaders.append("api-key", "apikeymasked");
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify({"search":"","filter":"geo.distance(Location, geography'POINT(-6.184120 53.605190)') le 50","select":"name","count":"true"});
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
const response = fetch("maskedurl", requestOptions)
.then(response => response.json())
.then(result => console.log(result.value))
.catch(error => console.log('error', error));
console.log(response);
}