无法将表单数据从React发送到PHP脚本

问题描述：

我试图使用后端PHP脚本来验证我的ReactJS脚本。不幸的是，我收到以下错误：无法将表单数据从React发送到PHP脚本

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://ourlanguages.net/data/getinfo.php . (Reason: CORS header 'Access-Control-Allow-Origin' missing).

React JS文件和PHP文件都位于我的服务器上。我认为它被认为是跨源的，因为一旦用户将JavaScript下载到浏览器中，它就不再被认为是来自我的服务器。我能做些什么来解决这个问题？

我使用位于此处的大多数表单代码：https://facebook.github.io/react/docs/forms.html并将其修改为接受用户名和密码。

我然后试图将该名称和密码发送到我的PHP脚本，该脚本将发回一条消息，指示用户是否已通过身份验证。这是给我的问题代码：

handleSubmit(event) { 
    alert('Data was submitted: ' + this.state.user + ': ' + this.state.password); 
    event.preventDefault(); 

    let response = fetch('http://example.com/verify_login.php', { 
     method: 'POST', 
     headers: { 
       'Accept': 'application/json', 
       'Content-Type': 'application/json' 
     }, 
     body: JSON.stringify({ 
       username: username, 
       password: password 
     }) 
    }).then((response) => { 
      return response.json() 

    }).then((responseJSON) => { 
      alert("Response: " + responseJSON); 
    }) 



    }

作为一个方面的问题，我能够在本地做出反应使用类似的代码，它工作得很好。 React JS和React Native如何处理这个问题有什么不同？

“两者都位于我的服务器上的阵营JS文件，PHP文件。”他们是否从完全相同的域（和协议）提供服务？ – topheman

这似乎是一个CORS问题。 ReactNative可以工作，因为它是沙盒式的（与使用PhoneGap/Cordova时相同），所以CORS不会被强制执行。在这种情况下，请确保您正在将JS和POST发送到相同的服务器（相同的协议，相同的域和相同的端口）。 – elmasse

@topheman谢谢你，那是我的问题。我只是从/ var/www/html /运行我的测试，而不是在我的php脚本所在的域中。猜猜我应该想到这一点！ :) – kojow7

答

您需要让您的PHP代码发送一个Access-Control-Allow-Origin响应标头。

因此以下内容添加到您的.php源文件的顶部：

<?php 
header("Access-Control-Allow-Origin: *");

无法将表单数据从React发送到PHP脚本

相关推荐