Question

我正在使用Vue.js创建一个Web应用程序，在此Web应用程序中，人们必须登录才能接收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文件中设置标头，但这似乎也不起作用。

发出发布请求的方法：

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>

这是我得到的标题：

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

Answer 1

CORS是“跨源资源共享”，请参见https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests。基本上，它是由您的浏览器强制执行的。如果浏览器阻止了跨域请求，则可以选择以下选项：

使它不是跨源请求（通过将所有内容托管在同一主机和端口上）
满足“简单请求”的条件，因此浏览器通过以下方式发出HTTP请求
在托管POST表单的任何内容上实现CORS的服务器端，通常是Web服务器配置的繁琐工作（即在httpd.conf文件中），或者编写允许资源的自定义OPTIONS请求处理程序共享到发起POST请求的页面。

在最后两个选项中，您可能想考虑一下页面启用后“来源”的外观。允许访问“ *”可能会起作用，但是正在撤消浏览器正在帮助您的跨站点脚本保护。

将请求发布到api被CORS政策阻止

1 个答案: