Reactjs 在本地主机上调用 Cakephp Api : Cross-Origin 请求被阻止 (CORS)

Question

我是 React js 的新手。因此，为了学习起见，我将它安装在我的系统上，即运行在本地主机上，端口为 3000。我还在 xampp 上安装了 cakephp 版本 2.98，这又是运行在本地主机上，但带有端口8082。现在，当我尝试调用从 React js 到我的 localhost:8082 上的 cakephp api 的获取操作时，我收到错误消息：

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8082/cakephp298/users/apitest. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)."

我尝试在我的索引文件的脚本标签中添加 crossorigin 属性，但它不起作用。我正在寻找将 headers 添加到获取操作的解决方案。

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

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 应用程序应用的限制。

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin.

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

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

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

在 CakePHP 中，它看起来像这样

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

您可以阅读更多相关内容HTTP header here and how to set headers in CakePHP here

Reactjs 在本地主机上调用 Cakephp Api : Cross-Origin 请求被阻止 (CORS)

Reactjs call Cakephp Api both on localhost : Cross-Origin Request Blocked (CORS)

cakephp-2.0

reactjs