附录

Question

我有一个Vue.js CLI项目正在运作。
它通过AJAX从Apache提供的localhost端口8080访问数据。
在我构建项目并将其复制到Apache提供的文件夹后，它可以正常工作，并可以通过该服务器上的AJAX访问数据。
但是，在开发期间，由于Vue.js CLI网站由在不同端口（8081）上提供服务的Node.js提供服务，因此我收到跨站点脚本错误）并希望避免跨站点脚本总的来说。

我可以模拟提供的数据的方式是什么，例如Vue.js-CLI项目中的某种服务器脚本，它将在开发过程中为端口8081上的AJAX调用提供模拟数据，从而避免所有跨站点脚本问题？

附录

在我的config/index.js文件中，我添加了一个proxyTable：

  dev: {
    env: require("./dev.env"),
    port: 8081,
    autoOpenBrowser: true,
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {
      "/api": {
        target: "http://localhost/data.php",
        changeOrigin: true
      }
    },

现在我按照这样的方式进行AJAX调用：

axios({
    method: 'post',
    url: '/api',
    data: {
        smartTaskIdCode: 'activityReport',
        yearMonth: '2017-09',
        pathRewrite: {
          "^/api": ""
        }
    }

但现在我在JavaScript控制台中看到了：

错误：请求失败，状态代码为404

附录2

表观axios有重新路由问题，所以我尝试使用vue-resource但是这段代码显示错误：

var data = {
    smartTaskIdCode: 'pageActivityByMonth',
    yearMonth: '2017-09'
}
this.$http.post('/api', data).then(response => {
    this.pageStatus = 'displaying';
    this.activity = response.data['activity'];
    console.log(this.activity);
}, response => {
    this.pageStatus = 'displaying';
    console.log('there was an error');
});

Answer 1

webpack模板有自己的文档，在开发过程中有一章关于API代理：

http://vuejs-templates.github.io/webpack/proxy.html

如果您使用它，则意味着您将在开发期间从节点服务器请求您的数据（并且节点服务器将代理＆lt;对您的真实后端的请求），以及直接在生产中的真实后端，因此您将拥有在每个环境中使用不同的主机名。

为此，您可以在/config/dev.env.js＆amp;中定义一个env变量。 /config.prod.env.js

如何在Vue.js-CLI项目中为AJAX调用提供数据？

附录

附录2

1 个答案: