未找到 VueJS POST 404答案

【问题标题】：VueJS POST 404 Not Found未找到 VueJS POST 404
【发布时间】：2020-07-28 10:00:02
【问题描述】：

我的目标是将我的 Quasar 应用程序运行到连接到局域网的其他设备上。我设法按预期运行它们，尽管当我登录网站时，尽管工作，但我遇到此错误POST http://10.0.0.20:8080/MyComposer/?submitId=3 404 (Not Found) 以前在我的本地主机上很好。为什么它没有正确读取后端文件夹中我的 index.php 中的类？

附：我不知道这是否可以解决我的问题，但是当我使用 phpinfo() 进行调试时，我注意到 REQUEST_METHOD 有 GET 而不是 POST。可以交换它们吗？你们给我什么我都试试。

控制台

General
Request URL: http://10.0.0.20:8080/MyComposer/?submitId=3
Request Method: POST
Status Code: 404 Not Found
Remote Address: 10.0.0.20:8080
Referrer Policy: no-referrer-when-downgrade

Response Headers
Connection: keep-alive
Content-Length: 151
Content-Security-Policy: default-src 'none'
Content-Type: text/html; charset=utf-8
Date: Tue, 28 Jul 2020 12:18:12 GMT
Vary: Accept-Encoding
X-Content-Type-Options: nosniff
X-Powered-By: Express

Request Headers
Accept: application/json, text/plain, 
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,es;q=0.8
Connection: keep-alive
Content-Length: 49
Content-Type: application/json
Host: 10.0.0.20:8080
Origin: http://10.0.0.20:8080
Referer: http://10.0.0.20:8080/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36

Headers.php

<?php
header('Access-Control-Allow-Origin: http://10.0.0.20:8080/'); //OR EITHER http://10.0.0.20:8080/ OR .$_SERVER['HTTP_ORIGIN']
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Max-Age: 3600');
if (strtoupper($_SERVER['REQUEST_METHOD']) === 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
    exit(0);
}

store.js

   actions: {
      LOGIN (context, payload) {
        return new Promise((resolve, reject) => {
          axios
            .post('/MyComposer/', payload, {
              headers: { 'Content-Type': 'application/json' },
              params: {
                submitId: 3
              }
            })

index.php

<?php
require 'Classes/Headers.php';
require 'vendor/autoload.php';

echo 'Hello!';
phpinfo();

use Classes\SubjectClass;
use Classes\TestClass;
use Classes\AnswerClass;
use Classes\LoginClass;
use Classes\RegisterClass;
use Classes\TeacherClass;
use Classes\StudentClass;
use Classes\AccountClass;
use Classes\AccessClass;
use Classes\SchoolClass;

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $addsubject = new SubjectClass();
    $addsubject->addSubject();
    $addtest = new TestClass();
    $addtest->addTest();
    $submitTest = new AnswerClass();
    $submitTest->submitTest();
    $submitLoginData = new LoginClass();
    $submitLoginData->submitLoginData();
    $addAccountData = new RegisterClass();
    $addAccountData->addAccountData();
    $addSchool = new SchoolClass();
    $addSchool->addSchool();
}

【问题讨论】：

当您在浏览器中打开开发者工具并检查控制台和网络时，您是否看到正在发出请求？如果您看到正在处理请求，您能否在问题中添加响应标头的屏幕截图。
我现在更新了问题。希望你能帮我解决这个问题。
如果您直接在浏览器中输入“10.0.0.20:8080/MyComposer/?submitId=3”并点击提交，您会得到其他内容，然后是 404？
没有别的，只是 404 Not Found。
这意味着您的 JS 代码很好，但需要检查您的本地服务器设置。该端口很可能是正确的，因为在其他情况下您会收到超时。您使用的是哪个网络服务器？您使用虚拟目录还是您的“MyComposer”目录位于 Web 服务器根目录中？

标签： javascript php vue.js

【解决方案1】：

问题不是由编码错误引起的，而是由于受影响的系统上安装了两个网络服务器，一个在默认端口 80 上运行的 XAMPP 安装和一个在端口 8080 上运行的 Node.Js 服务器。

为了诊断问题，我们首先将脚本中使用的 URL 复制粘贴到一个浏览器窗口中，该窗口给出了相同的 404 HTTP 错误。这排除了 axios.post() 方法导致该行为的选项。

接下来测试了基本的 HTTP 端口分配。调用地址http://10.0.0.20（本地网络内的用户IP）给出了正确的XAMPP主页。在检查httpd.conf 和其中的Listen 设置（应该是Listen 8080）时，我们看到Apache 正在使用默认的HTTP 端口。将其更改为 8080（在脚本中使用）并重新启动 Apache 导致服务器无法启动并出现错误：

检测到问题！ “C:\Program”正在使用端口 8080 Files\nodejs\node.exe" 带有 PID 3808！没有 Apache 将无法启动配置的端口免费！您需要卸载/禁用/重新配置阻止应用程序或重新配置 Apache 和控制面板监听不同的端口。

现在可以确定是端口混乱是问题的原因。从脚本中删除 :8080 可确保将请求发送到正确的服务器。

【讨论】：