Vue 3（Vite）应用与 PHP API 之间的 CORS 问题解决方案

2024-03-29 14:35:48

解决 PHP API 与 Vue 3（Vite）应用的 CORS 问题

跨域资源共享（CORS）问题可能会给构建 Vue 3（Vite）应用带来烦恼，特别是当 API 是用 PHP 开发时。本文将深入探讨这个常见问题，并提供分步指南和代码示例，帮助你成功部署应用到生产环境。

理解 CORS

CORS 是一种机制，允许浏览器从不同域请求资源。由于安全原因，浏览器对跨域请求实施了限制，称为同源策略。CORS 机制让开发人员能够在受控环境中绕过这些限制。

配置 PHP API

要解决 CORS 问题，我们需要配置 PHP API 以允许来自 Vue 3 应用的请求。这需要在 API 响应中设置适当的 CORS 标头。以下是 PHP 代码示例：

header("Access-Control-Allow-Origin: https://beta.myapp.com");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: POST, GET, DELETE, OPTIONS");
header("Access-Control-Max-Age: 3600");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') exit(0);

这些标头解释如下：

允许来自 https://beta.myapp.com 域的请求。
设置响应内容类型为 JSON。
允许 POST、GET、DELETE 和 OPTIONS HTTP 方法。
设置预检请求的最大缓存时间为 3600 秒。
允许浏览器发送某些标头，例如 Content-Type、Authorization 和 X-Requested-With。
如果请求是预检请求，则返回空响应。

配置 Vite 代理（仅限开发）

在开发过程中，Vite 的代理功能可以通过将请求重定向到 API 来简化 CORS 配置，而无需修改 API 的 CORS 标头。在你的 Vue.js 项目的 vite.config.js 文件中，添加以下代理配置：

export default defineConfig({
  server: {
    proxy: {
      '/api': 'http://localhost:8000',
    },
  },
});

构建生产版本

在构建生产版本时，Vite 将忽略代理配置。因此，你需要将 API 的完整 URL 设置为 VITE_API_URL 环境变量，如下所示：

npm run build -- --env.VITE_API_URL=https://api.myapp.com

检查和解决问题

构建生产版本后，使用浏览器控制台检查 API 请求是否成功。如果仍然遇到 CORS 错误，请尝试以下步骤：

确保你的服务器正在发送正确的 CORS 标头。
确保你的 Vue 3 应用正在向正确的 API 端点发送请求。
检查你的浏览器控制台以获取有关错误的更多信息。
查看你的 API 日志以获取任何可能表明 CORS 问题的错误消息。

结论

解决 PHP API 与 Vue 3（Vite）应用之间的 CORS 问题需要配置 API 以允许跨域请求，以及在开发和生产环境中正确设置代理和环境变量。遵循本文中概述的步骤，你可以克服此问题，确保你的应用在所有环境中正常运行。

常见问题解答

如何确定是否发生了 CORS 错误？
在浏览器控制台中，你会看到类似于 "Access to XMLHttpRequest at 'https://api.myapp.com/api/v1/users' from origin 'https://beta.myapp.com' has been blocked by CORS policy" 的错误消息。
为什么需要预检请求？
预检请求用于检查服务器是否允许特定的 HTTP 方法和标头。
我可以使用 Vite 构建 Vue 3 应用并将其部署到 PHP API 上吗？
是的，通过适当的 CORS 配置和代理设置，你可以使用 Vite 构建 Vue 3 应用并将其部署到 PHP API 上。
如何处理不同的 API 端点？
如果你有不同的 API 端点，你可以为每个端点设置单独的代理配置或使用通配符代理。
如何防止其他域滥用我的 API？
通过限制允许的来源域和使用签名或令牌，你可以防止其他域滥用你的 API。