Vue.js-vue.config.js中的代理被忽略

Question

我一直在搜索和阅读关于这个主题的文档，但我没有尽力让它工作。https://cli.vuejs.org/config/#devserver-代理

我让我的Vue.js申请正常了

vue create my-app

所以我按命令运行应用程序

npm run serve

在…上http://localhost:8080/. 相当标准的东西。

但是我的应用程序需要一个运行在https://localhost/的PHP后端，所以我在根目录vue.confic.js文件中设置了代理设置。

vue的内容。confic。js文件：

module.exports = {
    devServer: {
        proxy: {
            '^/api': {
                target: 'https://localhost/',
                ws: true,
                changeOrigin: true
            }
        }
    }
};

我想让axios调用地址上的脚本

https://localhost/test.php

公理的召唤是

mounted() {
    this.$axios.get('api/test.php', {})
        .then(response => { console.log(response.data) })
        .catch(error => { console.log(error) });
    },

但由于某种原因，我不知道我仍然在

GET http://localhost:8080/api/test.php 404 (Not Found)

先谢谢你。我很乐意得到任何提示。

Answer 1

你可以试试

https：真的，

proxy: {
            '/api': {
                target: 'https://localhost/',
                ws: true,
                changeOrigin: true
            }
        }

在尝试之前，请通过npm run serve重新启动以使其有意义

Answer 2

您的axios调用将使用网页所使用的任何协议向API发出请求。

错误显示您正在调用超文本传输协议，但您的webpack配置只是欺骗https。您是否从提出请求的页面访问https？

如https://localhost:8080

您还可以尝试更新Web包代理服务器，使其看起来像这样

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false
      }
    }
  }
};

其他调试步骤：从终端卷曲Apiendpoint以查看是否存在协议问题