Cors错误与axios反应，但不与读取

Question

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

CORS策略阻止从源http://localhost:3000在maskedurl访问XMLHttpRequest：对预试请求的响应不通过权限改造检查：请求的资源上不存在访问控制允许源标头。

这是我的组件

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;

这是我在名为azure.js的文件中的axios.create方法，该文件位于名为API的组件文件夹的同级文件夹中

import axios from 'axios';

export default axios.create({
    baseURL: 'maskedurl',
    params: {
        "search": "",
        "select": "name",
        "count": "true"
    },
    headers: {
        "Access-Control-Allow-Origin": "*"
    }
}); 

这不管用。

然而，当我将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);
}

有什么想法吗？

Answer 1

通常是服务器站点问题，但您可以使用PROXYURL从客户端覆盖此问题

const proxyURL = "https://cors-anywhere.herokuapp.com/";
const requestURL = YOUR URL;
const response = fetch(proxyURL + requestURL, requestOptions)