VueJS本地调用API报错：8080端口访问80端口接口该如何解决

这个问题我太熟了——你遇到的是**跨域资源共享（CORS）**问题，因为你的Vue应用跑在8080端口，而PHP API在80端口，浏览器的同源策略会阻止这种跨端口的请求，所以才会返回status 0的错误。下面给你几个靠谱的解决办法：

办法一：在PHP后端添加CORS响应头 #

这是最直接的后端解决方案，不管是开发还是生产环境都能用。在你的PHP API脚本的最开头（任何输出之前）添加以下代码：

// 允许指定域名的跨域请求（这里是你的Vue应用地址）
header("Access-Control-Allow-Origin: http://localhost:8080");
// 允许的请求方法
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
// 允许的请求头
header("Access-Control-Allow-Headers: Content-Type");

如果开发阶段想临时允许所有域名访问，可以把Access-Control-Allow-Origin的值改成*，但生产环境千万不要这么做，会有安全风险。

办法二：用Vue CLI的代理配置（推荐开发环境） #

开发环境下，修改后端代码有时候比较麻烦，用Vue的代理功能更方便。在你的Vue项目根目录创建（或修改）vue.config.js文件，添加代理配置：

module.exports = {
  devServer: {
    proxy: {
      // 匹配所有以/gaming/api开头的请求
      '/gaming/api': {
        // 代理目标地址（你的PHP服务地址）
        target: 'http://localhost:80',
        // 开启跨域模拟
        changeOrigin: true
      }
    }
  }
}

然后修改你Vue代码里的请求地址，把完整URL改成相对路径：

mounted: function(){
  this.$http.get('/gaming/api/game/1').then((data)=>{
    console.log(data.body);
  });
}

这样Vue的开发服务器会把请求代理到80端口，浏览器就不会认为是跨域了。

办法三：确保Apache的headers模块开启 #

如果用了办法一但还是没效果，可能是XAMPP的Apache没开启mod_headers模块。打开XAMPP的Apache配置文件httpd.conf，找到下面这行，去掉前面的#注释：

LoadModule headers_module modules/mod_headers.so

保存后重启Apache服务，再测试请求应该就正常了。

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