Javascript Cors错误,与axios反应,但与fetch不反应

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

我正在尝试从react前端查询我的Azure搜索门户。我已启用正确索引上的所有COR。当我用fetch查询时,我得到的数据很好,但是当我用axios查询时,我得到了以下错误

从源代码访问“maskedurl”处的XMLHttpRequesthttp://localhost:3000'已被CORS策略阻止:对飞行前请求的响应未通过访问控制检查:请求的资源上不存在'access control Allow Origin'标头

这是我的组件

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