【问题标题】：How to use Vue.js and PHP on one server?如何在一台服务器上使用 Vue.js 和 PHP？
【发布时间】：2018-07-14 16:25:36
【问题描述】：

所以目前我已经构建了一个使用 Vue.js 和 PHP 的应用程序。 PHP 是我的后端，它使用 mysql 数据库。

我在我的本地机器 (Mac) 上运行它。当我运行我的 vue.js 端时，我使用命令 npm 运行开发这将启动一个网络服务器，我通过访问 localhost:8080 来查看它。

然后对于 PHP，我使用 MAMP 启动另一个 Web 服务器。这运行 Apache 和 Mysql。要访问这些，它们存储在 localhost:8888。

我从 vue.js 端向 PHP 端发布和获取请求。我可以让它工作的唯一方法是使用一个名为：允许控制允许来源的 chrome 扩展。否则我会收到一个跨源错误，他们将无法通信。

因此有没有一种方法可以让我在同一个网络服务器上同时运行两者？我不确定如何

【问题讨论】：

你试过了吗？ gist.github.com/odan/066d9848b72cdd4f0feff1b592696eab
@DanielO 提供的链接正是您需要遵循的。它几乎只是预编译所有内容，然后在页脚中调用脚本。
尝试添加 header("Access-Control-Allow-Origin: *");到你的 .php 文件的顶部
尝试使用 webpack 开发服务器代理：stackoverflow.com/a/46796258/586678

标签： php vue.js webserver

【解决方案1】：

由于您想在一台服务器上部署 Vue.js 应用程序和 PHP，因此您有多种选择。

方法 1. 不同领域

假设您的 PHP 应用程序只是一个 API，因此有人可能会争辩说您可以将其托管在 api.example.org 之类的东西上，然后调用该域。这将要求您添加header("Access-Control-Allow-Origin: THE_FRONTEND_DOMAIN"); - 如果您不想让整个互联网都可以访问这些端点，请不要在生产环境中使用header("Access-Control-Allow-Origin: *");。设置好之后，您现在可以在 www.example.org 上托管您的 Vue.js 应用程序并执行对 api.example.org 的调用。

PHP: api.example.org
Vue: www.example.org

方法2.相同域/不同文件夹

如果您不想要两个不同的域，您可以为您的 API 保留一个路由。这将允许您在同一域上托管 PHP 和 Vue.js。所以基本上让我们假设我们想让我们的 PHP 应用程序在www.example.org/api/ 上可用，我们所要做的就是在那个级别上传我们的 PHP 文件。在那里上传我们的 API 后，我们必须在根级别上传 Vue.js 并相应地配置我们的 Web 服务器（Nginx、Apache），这样它就不会重写 /api/ url。

PHP: www.example.org/api/
Vue: www.example.org

【讨论】：

【解决方案2】：

在 vue 文件上无需添加任何内容。 SERVER 上必须允许 CORS。

客户端会在发送 POST 请求之前发送 OPTIONS 请求。

服务器必须处理 OPTIONS 请求，然后才能允许 Origin 和 content-type。

把这个放在php上


    <?php
    // skip OPTIONS method
    if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Methods: POST, GET, DELETE, PUT, PATCH, OPTIONS');
        header('Access-Control-Allow-Headers: token, Content-Type');
        header('Access-Control-Max-Age: 1728000');
        header('Content-Length: 0');
        header('Content-Type: text/plain');
        die();
    }
    // allow every url
    header('Access-Control-Allow-Origin:  *');
    header('Access-Control-Allow-Methods:  POST, GET, OPTIONS, PUT, DELETE');
    // allow content type !!IMPORTANT
    header('Content-Type: application/json');

    //Because the content-type sent by vuejs is application/json, you will not be able to read data via the $_POST $_GET or $_REQUEST variable.
    $post = json_decode(file_get_contents('php://input'), true);

    if($post['username']=='hello') {  }

【讨论】：