让我们来谈谈CORS和Frontend与Vite(西班牙语版本)
#node #php #vite #cors

我经常发现自己会开发反应或预先反应的网站。最终,预告是我的最爱,更快,更轻松。有时,不必使用真实的服务器,我正在教书,进行演示,或者我只是在没有互联网的情况下工作,即使它是本地的,我也需要模拟服务器。

所以我想如何尝试我的边境,我制作了一个简单的PHP文件,该文件将通过帖子读取我发送的内容,现在您将返回JSON,类似于真实服务器将要给我的json。

(在Artculo Hay的末尾,PHP服务器的版本节点)

php -S 127.0.0.1 -t server.php
<?php

$json = file_get_contents('php://input');
$data = json_decode($json, true);

if (!isset($data['username']) || !isset($data['password'])) {
    http_response_code(400);
    echo json_encode([
        'status' => 'error',
        'message' => 'Username or password not provided'
    ]);
    exit;
}

if ($data['username'] === 'nicolas' && $data['password'] === 'Correct-h0rse-Battery-staple') {
    echo json_encode([
        'status' => 'success',
        'token' => 'fake_token'
    ]);
} else {
    http_response_code(401);
    echo json_encode([
        'status' => 'error',
        'message' => 'Invalid username or password'
    ]);
}

使用PHP,因为它没有单位,可以进行演示并剩下。但是此代码不起作用。我在控制台上看到的错误说:

Response body is not available to scripts (Reason: CORS Failed)

在这一点上,尤其是在阅读标题之后,我们已经知道错误的到来。但是什么是CORS?

CORS是交叉原始资源共享的首字母缩写。这是一种安全机制,允许指定谁可以访问服务器资源。

所以我唯一要添加到我的PHP代码的是一对HTTP标头,对吗?

<?php

header('Content-Type: application/json');
header('Access-Control-Allow-Origin: http://localhost:5173');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');

我的代码仍然不起作用!我的请求没有到达服务器,但是为什么?

Axios显然是在JSON对我的凭据提出的帖子之前提出请求。此请求称为“前提”或事先请求。这是一个具有动词选项的请求,唯一提出的是询问服务器可以完成哪些类型的请求。我们将修改标题,如果为这个新动词,我们将添加一个小的:

// headers
header('Access-Control-Allow-Methods: POST, OPTIONS');

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit;
}
// fake login

现在是!现在起作用!通常,浏览器试图确保政治“相同的起源”,以防止在原点(域,协议或端口)上使用JavaScript代码(域)。

我们的php代码最终将是:

<?php

header('Content-Type: application/json');
header('Access-Control-Allow-Origin: http://localhost:5173'); // CORS
header('Access-Control-Allow-Methods: POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type');

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit;
}

$json = file_get_contents('php://input');
$data = json_decode($json, true);

if (!isset($data['username']) || !isset($data['password'])) {
    http_response_code(400);
    echo json_encode([
        'status' => 'error',
        'message' => 'Username or password not provided'
    ]);
    exit;
}

if ($data['username'] === 'nicolas' && $data['password'] === 'Correct-h0rse-Battery-staple') {
    echo json_encode([
        'status' => 'success',
        'token' => 'fake_token'
    ]);
} else {
    http_response_code(401);
    echo json_encode([
        'status' => 'error',
        'message' => 'Invalid username or password'
    ]);
}

您可能没有系统中的PHP解释器,可以在Nodejs中找到相同的代码:

const express = require("express");
const bodyParser = require("body-parser");

const app = express();
const port = process.env.PORT || 3000;

app.use(bodyParser.json());
app.use((req, res, next) => {
  res.setHeader("Content-Type", "application/json");
  res.setHeader("Access-Control-Allow-Origin", "http://localhost:5173");
  res.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
  next();
});

app.options("*", (req, res) => {
  res.sendStatus(200);
});

app.post("/login", (req, res) => {
  const { username, password } = req.body;

  if (!username || !password) {
    res
      .status(400)
      .json({ status: "error", message: "Username or password not provided" });
    return;
  }

  if (username === "nicolas" && password === "Correct-h0rse-Battery-staple") {
    res.json({ status: "success", token: "fake_token" });
  } else {
    res
      .status(401)
      .json({ status: "error", message: "Invalid username or password" });
  }
});

app.listen(port, () => {
  console.log(`Servidor Node.js ejecutándose en http://localhost:${port}`);
});

Caver的农作物: