Cors 发布本地 xampp 服务器和反应前端

Question

我有一个本地 Xampp 在 http://localhost（端口 80）上运行 该服务器在 kiosk2/api 文件夹中提供 api（根文件 api.php）

这个文件夹中的.htaccess文件是

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule !^src($|/) api.php [L]

我有一个使用 vite 在 localhost:5173 上运行的 React 应用程序

当我在不添加标头的情况下获取端点时，它工作正常

const res = await fetch(`http://localhost/kiosk2/api/items`);

但是，当我使用另一个请求并尝试添加授权令牌时，我收到 cors 错误。

const rawResponse = await fetch(url, {
    headers: {
      Authorization: "Basic " + btoa(user + ":" + password),
    },
  });

在浏览器中出现以下错误：

从源“http://localhost:5173”获取“http://localhost/kiosk2/api/login”的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：确实如此没有 HTTP 正常状态。

有人可以帮我吗？

Answer 1

允许

Authorization

标题位于

Access-Control-Allow-Headers

中

更新.htaccess

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Authorization, Origin, X-Requested-With, Content-Type, Accept"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule !^src($|/) api.php [L]