【发布时间】：2019-09-30 19:50:32
【问题描述】：
我正在使用 Vue.js 制作一个网络应用程序，在这个网络应用程序中，人们必须登录才能接收 API 密钥。我正在使用 axios 向我的 API 发出一个发布请求，我还发送了 2 个参数，一个名称和一个密码。每当我提交表单时，它总是给我这些错误：
OPTIONS http://localhost/Leerjaar%203/api/apikey/ 500 (Internal Server Error)
和
Access to XMLHttpRequest at 'http://localhost/Leerjaar%203/api/apikey/' from origin 'http://localhost:8082' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
我已经被这个问题困扰了几个月了，几个月前我停止了尝试，但今天我决定回到它并再试一次。我已经尝试在我的 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 的最好方法是不要有 CORS（是的，我知道，你想扇我耳光）。我处理它的方式是使用 nginx 将所有一起玩的域放在同一个名称下。这意味着我使用
http://local.dev为JS 和PHP 提供服务（local.dev 是一个假名，我使用/etc/hosts文件路由到127.0.0.1，在Windows 上它位于C:\Windows\System32\drivers\etc中）。在网络服务器配置（我使用 nginx）中，我尝试加载资源@第一台服务器（在你的情况下为:8082），然后回退到 php。它就像一个魅力，不 - 你还没有尝试过一切！ :) -
OPTIONS 请求导致您向其发送请求的服务器（即您的 API 服务器）发生 500 内部服务器故障。该 500 错误是您需要修复的问题，其原因与您在 API 服务器上的 CORS 配置无关。所以CORS错误实际上是无关紧要的。您需要查看 API 服务器上的服务器日志，看看服务器发生了什么内部故障，导致它最终响应 500 错误。