Vue.js 2中如何使用proxyTable实现PHP后端API代理访问？

看起来你已经把Apache的php目录链接到了Vue项目的static文件夹，现在核心问题是开发环境下的跨域请求——因为Vue的开发服务器默认跑在8080端口，而Apache通常是80端口，浏览器会因为端口不同拦截跨域请求。下面给你两种最实用的解决方案：

方案一：用Webpack Dev Server的代理配置（推荐） #

这是Vue-cli Webpack模板自带的功能，配置起来很简单：

1. 打开项目根目录下的config/index.js文件
2. 找到dev对象里的proxyTable，把它改成下面这样：

proxyTable: {
  // 匹配所有以/php开头的请求
  '/php': {
    target: 'http://localhost', // 你的Apache服务器地址
    changeOrigin: true, // 必须设为true，否则服务器会收到来自8080的请求，可能拒绝
    pathRewrite: {
      '^/php': '/php' // 这里保持路径不变，因为你的API本来就在/php路径下
    }
  }
}

3. 重启Vue开发服务器（npm run dev）

之后，在你的Vue组件里请求API时，直接用相对路径即可，比如用axios的话：

// 不用写完整的http://localhost/php/script.php
axios.get('/php/script.php')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

这个方法的好处是完全在Vue项目配置里解决，不需要修改Apache的任何设置，而且开发环境和生产环境的代码可以无缝衔接（生产环境如果把Vue打包后放到Apache下，直接用相对路径就好）。

方案二：调整端口实现同域（可选） #

如果你不想用代理，也可以让Vue开发服务器和Apache处于同端口，但操作起来稍显麻烦：

1. 修改config/index.js里的dev.port为80
2. 确保Apache没有占用80端口（如果Apache本来用80，先停掉或修改Apache的端口配置）

不过这种方法可能需要调整系统权限（比如非root用户使用80端口需要额外设置），开发时切换环境也不够灵活，所以还是更推荐方案一。

额外注意：符号链接的权限问题 #

因为你把Vue的static文件夹链接到了Apache的php目录，要确保Apache进程有访问Vue项目目录的权限：

• Linux/macOS：检查Vue项目文件夹的权限，确保Apache的运行用户（比如www-data）有读权限，必要时可以用chmod或chown调整；如果是符号链接，还要确保链接指向的目标文件夹权限正确。
• Windows：确保符号链接是用管理员权限创建的，并且Apache有访问该链接的权限。

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