Vue.js通过Axios与proxyTables连接本地MySQL数据库问题咨询

我来帮你搞定这个问题！你遇到的情况其实挺常见的——Vue开发服务器和PHP内置服务器是两个完全独立的服务，端口不一样的话，浏览器的跨域安全机制就会阻止请求，另外路径配置也可能踩了坑。下面给你几个实用的解决办法：

• 首先，确保你的PHP内置服务器在正常运行，比如你是用php -S localhost:8000 api.php启动的，那它的访问地址就是http://localhost:8000
• Vue开发服务器默认是http://localhost:8080，两个端口不同，这就是跨域问题的根源

方案一：Vue配置代理（开发环境首选） #

Vue CLI自带了代理功能，可以把前端的API请求自动转发到PHP服务器，完美避开跨域限制。

• 打开Vue项目根目录下的vue.config.js（要是没有就新建一个）
• 把下面的配置贴进去：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000', // 这里填你的PHP服务器地址，端口要和你启动的一致
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 如果你的api.php不需要前缀，就把/api去掉，比如原来请求`/get-data`，现在用`/api/get-data`就能转发
        }
      }
    }
  }
}

• 修改完之后重启Vue开发服务器，再发请求就正常了

方案二：给PHP API添加跨域响应头 #

直接在你的api.php最开头加上跨域允许的响应头，让浏览器放行Vue服务器的请求：

header("Access-Control-Allow-Origin: http://localhost:8080");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");
// 处理预检OPTIONS请求
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    exit(0);
}

• 要是开发环境想临时允许所有域名，可以把http://localhost:8080改成*，但生产环境千万别这么做，不安全

方案三：打包Vue项目放到PHP服务器目录 #

如果想测试生产环境的效果，可以这么干：

• 运行npm run build把Vue项目打包成静态文件，生成dist目录
• 把dist里的所有文件复制到PHP服务器的根目录（就是你启动PHP服务器时指定的目录），然后访问PHP服务器的地址，就能直接打开Vue页面，同时请求API也不会有跨域问题了

• 确认API请求路径是对的：比如PHP服务器是localhost:8000，那请求地址要么写全，要么用代理后的路径，别写错端口
• 看浏览器控制台的错误信息：如果是跨域错误会明确提示CORS policy，如果是404就是路径不对，根据错误信息调整会更快

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