javascript - 使用 axios 而不是 fetch 在 React 中出现 Cors 错误

问题描述

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

从源“http://localhost:3000”访问“maskedurl”处的 XMLHttpRequest 已被 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;

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

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

有任何想法吗？

标签： javascriptreactjsazureaxios

javascript - 使用 axios 而不是 fetch 在 React 中出现 Cors 错误

问题描述

解决方案

推荐阅读