vuejs2中如何使用proxyTable？

Question

我正在学习使用 Vue-cli webpack。我希望我的应用能够使用开发服务器访问 PHP 后端 API。后端 API 由 Apache 在同一台计算机上托管。

为了我的测试，我创建了一个非常简单的 PHP 脚本，我可以使用 url http://localhost/php/script.php

访问它

<?php
header("Content-type:application/json");
$data = [
  'type' => 'Car',
  'brand' => 'Ford',
  'color' => 'Blue'
];
echo json_encode($data);

事实上，在我的 Apache httpd 服务器中，文件夹 php 是我的 vue 应用程序中静态文件夹的符号 link。

在我的 vue 应用程序中，我在桌面上使用命令 vue init vuetifyjs/webpack vuetestproject 创建了一个组件 Foo.vue，代码如下：

var axios = require('axios');
axios.get('/static/script.php', { data: "some data" })
   .then(function (response) {
      console.log('SUCCESS');
      console.log(response);
   })
   .catch(function (error) {
      console.log('ERROR');
      console.log(error.message);
   });

然后，在安装一些像axios这样的资源之后，我通过执行命令npm run dev来启动我的节点服务器。

在 http://localhost:8080/#/foo 上访问我的应用程序时，我可以看到正在执行 axios 请求。我在我的控制台中收到一条 SUCCESS 消息，这意味着 axios 正在收到响应。然而，这种反应并不是我所期望的。当我查看控制台中显示的对象时，似乎没有解释 PHP 代码。响应的数据属性包含 script.php 文件的内容，就像它是一个 .txt 文件一样。

请注意，我在 config/index.js 中为我的 vue 应用编辑了 proxyTable：

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/static': {
        target: 'http://localhost/php',
        changeOrigin: true
      }
    },

我查看了 http://vuejs-templates.github.io/webpack/proxy.html 上的信息以及我找到的其他几个来源。但我没能成功。我很确定我的问题出在这个 proxyTable 的某个地方。

谁能帮帮我？

Answer 1

不要从您定义为 assetsSubDirectory 的同一目录中提供您的 PHP 脚本。这样做会破坏代理并导致该目录中的项目作为静态文档提供服务，而不是通过 PHP 服务器代理。

相反，从另一个目录（如 "scripts"）中为您的脚本提供服务，并将其定义为代理路径。此外，如您所说，添加 rewrite 属性:

// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
  '/scripts': {
      target: 'http://localhost/php',
      rewrite: {'^/scripts': ''},
      changeOrigin: true
  }
},

使用新代理：

axios.get('/scripts/script.php', () => {...});

vuejs2中如何使用proxyTable？

How to use proxyTable in vuejs2?

webpack-dev-server

vuejs2

vue-cli