“请求的资源上不存在 'Access-Control-Allow-Origin' 标头”错误，即使给出了正确的标头

Posted 2023-03-04

【中文标题】“请求的资源上不存在 \'Access-Control-Allow-Origin\' 标头”错误，即使给出了正确的标头

【英文标题】："No 'Access-Control-Allow-Origin' header is present on the requested resource" error, even when proper headers are given“请求的资源上不存在 'Access-Control-Allow-Origin' 标头”错误，即使给出了正确的标头

【发布时间】：2018-08-16 12:24:59

【问题描述】：

我正在尝试在后端使用 php 并在前端使用 React JS 来读取 rest api。

这是我的 php 代码：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET');
header("Access-Control-Allow-Headers: X-Requested-With");
header('Content-Type: application/json');
$countryName = $_GET['countrystring'];
if (!empty($countryName))  
$countryDataUrl = 
'https://restcountries.eu/rest/v2/name/'.urlencode($countryName);
$countryDataJSON =  file_get_contents($countryDataUrl); 
$countryDataPHPArray = json_decode($countryDataJSON,true);
array_multisort($countryDataPHPArray);
$countryDataArrayLimited = array_slice($countryDataPHPArray, 0, 50);
echo json_encode($countryDataArrayLimited);
   

我尝试将 header('Access-Control-Allow-Origin: *'); 修改为 header('Access-Control-Allow-Origin: http://localhost:3000');

我的 React 代码如下：

import React,  Component  from 'react';

class Countrycomponent extends Component 
constructor(props) 
super(props);
this.state = countrystring: this.props.countrystring,countries:[];


componentDidMount()
    console.log("Enter");
            fetch("http://localhost:8000/?countrystring="+ this.state.countrystring,
        method:'get',
        headers: 
'Accept': 'application/json',
'Content-Type': 'application/json',
  
    ).
    then(response=>response.json()).
    then(responseData=>console.log(responseData))

  
  render() 
  return (
   <div className="">

    <p>hello</p>
    this.state.countries.name
   </div>
 );



export default Countrycomponent;

我的反应在端口 3000 上运行，php 在端口 8000 上运行。 提前致谢。

【问题讨论】：

试着把header('Access-Control-Allow-Methods: OPTIONS,GET');和header('Access-Control-Allow-Origin: http://theoriginintheaddressbar:1234');和header("Access-Control-Allow-Headers: X-Requested-With,Content-Type");放在一起

试过了。不工作

您能否提供完整组请求和响应标头？

我的整个代码都给出了。你能详细说明你需要什么吗？

为什么要为 GET 请求提供“Content-Type”？根据 CORS 规范，此标头是 not allowed 用于简单请求

【参考方案1】：

当您可以执行以下操作时，为什么还需要 PHP 服务器？

fetch("https://restcountries.eu/rest/v2/name/"+ this.state.countrystring,
    method:'get', .... )

我通过从 Chrome 控制台发出请求进行测试，restcountries.eu 支持 CORS 请求，所以这应该没问题

【讨论】：

我有要求在php中做