代码之家 › 专栏 › 技术社区 › Tom Van Aken

Cors发布本地xampp服务器并响应前端

cors .htaccess reactjs php

Tom Van Aken · 技术社区 · 6 月前

我有一个本地Xampp正在运行http://localhost(端口80) 此服务器在文件夹kiosk2/api(根文件api.php)中提供了一个api

此文件夹中的.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]

我在本地主机5173上使用vite运行了一个反应应用程序

当我在不添加标头的情况下获取端点时,它工作得很好

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

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

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

浏览器中出现以下错误:

访问获取地址'http://localhost/kiosk2/api/login“起源”http://localhost:5173'已被CORS策略阻止:对飞行前请求的响应未通过访问控制检查:它没有HTTP ok状态。

有人能帮帮我吗?

1 回复 | 直到 6 月前

Mahmudul Hasan 6 月前

允许 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]