Reactjs 在 localhost 上都调用 Cakephp Api：跨域请求被阻止（CORS）

Question

我是反应 js 的新手。因此，为了学习，我将它安装在我的系统上，该系统在 localhost 上运行，端口为 3000。我还在 xampp 上安装了 cakephp 2.98 版，它再次在 localhost 上运行，但端口为 8082。 现在，当我尝试从 react js 调用 fetch 操作到我在 localhost:8082 上的 cakephp api 时，我收到错误消息：

“跨域请求被阻止：同源策略不允许读取位于http://localhost:8082/cakephp298/users/apitest 的远程资源。（原因：CORS 标头‘Access-Control-Allow-Origin’缺失）。”

我尝试在我的索引文件的脚本标签中添加跨域属性，但它不起作用。 我正在寻找一种解决方案来添加标头以获取操作。

--------这是我的反应代码----

import React, { Component } from 'react';

class Login extends Component {
  constructor() {
    super();
    this.clicksfile = this.clicksfile.bind(this);
  }

  render() {
    return (

      <div id="mc_embed_signup">
        <input name="EMAIL" placeholder="Email address" required type="email" />
        <input name="password" type="password" placeholder="Password" required />

        <button onClick={ this.clicksfile } className="primary-btn hover d-inline-flex align-items-center">
          <span className="mr-10">Go</span><span className="lnr lnr-arrow-right" /></button>
        <div className="info" />
      </div>


    );
  }

  clicksfile(e) {
    fetch('http://localhost:8082/cakephp298/users/apitest').then(response => response.json()).then(response => {

      console.log('details fetched successfully they are');
      console.log(response);
    }).catch(error => {
      console.log('There is some error ashish');
      console.log(error);
    });
  }
}

有什么建议吗？ 谢谢你

Answer 1

这不是 react 的问题，而是 CakePHP 应用程序正在应用的限制。

跨域资源共享 (CORS) 是一种使用 额外的 HTTP 标头告诉浏览器让 Web 应用程序 在一个来源（域）运行有权访问选定的 来自不同来源的服务器的资源。

这意味着您不能在没有明确允许的情况下向其他域或端口发送请求。在这种情况下，您在 http://localhost:3000/ 上运行 react 并且您正在尝试请求 http://localhost:8082/。

要启用此功能，您需要将以下 HTTP 响应标头添加到 CakePHP 应用程序的端点。

Access-Control-Allow-Origin: http://localhost:3000

在 CakePHP 中，它看起来像这样

$response = $response->withHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

您可以阅读更多关于此HTTP header here 以及如何在CakePHP here 中设置标题