使用Vue-resource POST方法提交邮件表单至PHP文件遇404错误求助

我来帮你一步步排查和解决这个404问题，核心原因其实是Vue开发服务器和PHP脚本的运行逻辑不一样，咱们慢慢理清楚：

1. 先搞懂为什么会出现404 #

你把PHP文件放在项目主目录，但Vue的开发服务器（比如vue-cli自带的dev server）默认只会把public文件夹作为静态资源的根目录，而且它只能处理静态文件，根本没法解析PHP这种后端脚本。所以你访问http://localhost:8080/index.php的时候，服务器要么找不到文件（因为不在public目录里），要么就算找到了也没法执行PHP代码。

2. 第一步：启动专门的PHP服务器 #

PHP脚本必须靠PHP环境来运行，不能用Vue的前端服务器。你可以用PHP自带的内置服务器，操作很简单：

• 打开终端，cd到你的PHP文件所在的项目主目录
• 运行命令：

  php -S localhost:8000
  

这样就启动了一个PHP服务器在8000端口，现在你的index.php就能被正确解析了。

3. 第二步：修改请求地址 #

现在你的前端跑在localhost:8080，PHP服务器在localhost:8000，所以你需要把POST请求的URL改成http://localhost:8000/index.php，而不是原来的8080端口地址。

4. 解决跨域问题（必做） #

因为前端和后端端口不一样，浏览器会触发跨域限制，所以还得处理这个问题，两种方法选一个就行：

方法一：用Vue的代理转发（推荐） #

在Vue项目根目录创建或者修改vue.config.js文件，添加代理配置：

module.exports = {
  devServer: {
    proxy: {
      '/php-api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        pathRewrite: {
          '^/php-api': ''
        }
      }
    }
  }
}

然后把你的POST请求地址改成/php-api/index.php，这样Vue的开发服务器会自动把请求转发到PHP服务器，完美避开跨域问题。

方法二：在PHP文件里加跨域头 #

如果你不想改Vue配置，可以在index.php的最顶部添加这些代码：

header("Access-Control-Allow-Origin: http://localhost:8080");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Allow-Headers: Content-Type");

这样浏览器就会允许来自8080端口的请求了。

5. 最后检查路径细节 #

确认你的PHP文件名没写错大小写（比如是不是写成了Index.php而不是index.php，Linux/Mac下大小写敏感），路径里有没有多余的斜杠或者拼写错误。

按照上面的步骤来，应该就能解决404的问题啦！

内容的提问来源于stack exchange，提问作者kabugh