Question

我一直在搜索和阅读有关此主题的文档，但我毫不留情地使其发挥作用。 https://cli.vuejs.org/config/#devserver-proxy

我通过命令使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
            }
        }
    }
};

我正在尝试通过aios调用地址上的脚本

https://localhost/test.php

axios呼叫是

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

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

该错误表明您正在拨打http电话，但您的webpack配置仅欺骗https。您是从发出请求的页面访问https吗？

例如https://localhost:8080

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

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

其他调试步骤：在终端上卷曲您的Api端点，看是否是协议问题

Answer 2

您可以尝试

https：是的，

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

尝试之前，请先通过npm run serve重新启动

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

2 个答案: