使用 axios 而不是 fetch 的 React 中的 Cors 错误

Posted 2023-03-03

【中文标题】使用 axios 而不是 fetch 的 React 中的 Cors 错误

【英文标题】：Cors error in React with axios but not with fetch

【发布时间】：2021-01-11 23:29:56

【问题描述】：

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

从源“http://localhost:3000”访问“maskedurl”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“访问控制允许来源”请求的资源上存在标头。

这是我的组件

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

有什么想法吗？

【问题讨论】：

我在axios下看到这个问题：github.com/axios/axios/issues/1358

【参考方案1】：

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

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