Php 对被CORS策略阻止的api的Post请求

我正在用Vue.js制作一个web应用，在这个web应用中，人们必须登录才能收到API密钥。我正在使用axios向我的API发出post请求，同时还发送了两个参数，一个名称和一个密码。每当我提交表格时，它总是给我以下错误：

OPTIONS http://localhost/Leerjaar%203/api/apikey/ 500 (Internal Server Error)

及

我已经被这个问题困扰了好几个月了，几个月前我停止了尝试，但今天我决定回到这个问题上，再试一次。我已经尝试在我的PHP文件中设置标题，但这似乎也不起作用

发出post请求的方法：

formSubmit(e) {
            e.preventDefault();
            let currentObj = this;
            axios.post('http://localhost/Leerjaar%203/api/apikey/', {
                docent: this.docentNaam,
                wachtwoord: this.wachtwoord
            })
            .then(function (response) {
                currentObj.output = response.data;
                console.log(response.data);
            })
            .catch(function (error) {

            }); 
        }

我的PHP API：

<?php    
session_start();
include "../errors.inc.php";
include "../credentials.inc.php";
include "../database.inc.php";

$docent = Docent();

if (!isset($_POST["wachtwoord"]))    fout(400, "wachtwoord ontbreekt");
if ($_POST["wachtwoord"] !== "test") fout(401, "wachtwoord incorrect");


header('Access-Control-Allow-Origin: http://http://localhost:8081/', false);     
header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
header('content-type: application/json; charset=utf-8');
echo '{"apikey":"'.md5(md5($docent)).'"}';   

我的表格：

<form @submit="formSubmit">
                            <div class="form-group">
                                <label for="docentNaam">Naam:</label>
                                <input v-model="docentNaam" type="text" class="form-control" placeholder="Docenten afkorting">

                                <label for="wachtwoord">Wachtwoord</label>
                                <input v-model="wachtwoord" type="password" class="form-control" placeholder="Wachtwoord">

                                 <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </form>

这是我得到的标题：

---

我希望有人能帮我解决我的问题，我觉得我已经尝试了一切。

CORS是跨来源资源共享，请参阅。基本上，它是由浏览器强制执行的。如果浏览器阻止跨原点请求，您可以选择以下选项：

通过在同一主机和端口托管所有内容，使其不是跨源请求

满足简单请求的条件，因此浏览器允许通过HTTP请求

在承载POST表单的任何对象上实现CORS的服务器端，这通常是一项web服务器配置杂务，即在httpd.conf文件中，或者通过编写一个自定义选项请求处理程序，允许向发起POST请求的页面共享资源

---

在最后两个选项中，您可能想知道一旦页面处于活动状态，源代码将是什么样子。允许访问*可能会起作用，但会撤消浏览器正在帮助您的跨站点脚本保护。

我尝试将访问控制允许源代码设置为*但同样的错误不断出现。实际上，我对您的应用程序和API有点困惑。我在问题中看到localhost、localhost:8081和localhost:8082？哪一个是postapi的宿主，哪一个是POST请求的宿主？POST API还需要响应选项，允许响应头告诉浏览器允许POST请求通过。您问题中的错误消息表示，它没有与选项请求相关的HTTP ok状态。因此，如果您手工编写，请不要忘记将响应状态设置为200。如果您有某种代理运行到dev/debug，请尝试关闭它，并直接连接页面和API。API在localhost上运行，应用程序在localhost上运行：8082，尽管每次我重新启动服务器时，localhost转到另一个端口，这就解释了localhost:8081。在我写这个问题时，我还没有将代码更新为localhost:8082。我也没有运行代理。好的，CORS的问题是，对API的每个调用实际上是对API的两个调用。处理POST请求的PHP代码只有在浏览器首次发出选项请求后才会被调用。因此，创建一个OPTIONS请求处理程序，它返回allow头，而不是在POST响应中。关于status not ok的错误可能是因为OPTIONS请求的状态为404 not found。或者405，如果那里有不处理选项的资源。避免CORS的最好方法是不要CORS是的，我知道，你想扇我耳光。我处理它的方式是使用nginx将所有使用相同名称的域合并在一起。这意味着我使用http://local.dev local.dev是一个假名称，我使用/etc/hosts文件将其路由到127.0.0.1，在Windows上它位于C:\Windows\System32\drivers\etc中。在web服务器配置中，我使用nginx尝试加载资源@first server（在您的情况下）：8082，然后返回到php。它就像一个符咒，不，你还没有试过所有的方法。您可以调整这些值以满足您的需要。选项请求导致您要向其发送请求的服务器出现500内部服务器故障ー 您的API服务器。这500个错误是您需要修复的问题，其原因与API服务器上的CORS配置无关。所以CORS误差实际上是无关的。您需要查看API服务器上的服务器日志，并查看服务器中发生了什么.internal故障，导致服务器最终响应该错误。

<form @submit="formSubmit">
                            <div class="form-group">
                                <label for="docentNaam">Naam:</label>
                                <input v-model="docentNaam" type="text" class="form-control" placeholder="Docenten afkorting">

                                <label for="wachtwoord">Wachtwoord</label>
                                <input v-model="wachtwoord" type="password" class="form-control" placeholder="Wachtwoord">

                                 <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </form>