無法將表單數據從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如何處理這個問題有什麼不同？

來源

2017-02-10 kojow7

「兩者都位於我的服務器上的陣營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: *");

來源

2017-02-11 01:29:01 sideshowbarker

無法將表單數據從React發送到PHP腳本

回答

相關問題