Vue.js - vue.config.js 中的代理被忽略 [英] Vue.js - proxy in vue.config.js is being ignored

问题描述

我一直在搜索和阅读有关此主题的文档，但我无法让它发挥作用.https://cli.vuejs.org/config/#devserver-proxy

I have been searching and reading thru documentation on this topic but I was unbale to make it work. https://cli.vuejs.org/config/#devserver-proxy

我通过命令使我的 Vue.js 应用程序正常运行

I made my Vue.js application normaly by the commnand

vue create my-app

所以我通过命令运行应用程序

so I'm running the app by command

npm run serve

在 http://localhost:8080/ 上.非常标准的东西.

on http://localhost:8080/. Pretty standart stuff.

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

But my app needs a PHP backend which is running at https://localhost/ So I setted up the proxy setting in vue.confic.js file in my root directory.

vue.confic.js 文件内容:

Content of vue.confic.js file:

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

我正在尝试让 axios 调用地址上的脚本

And I'm trying to make axios call for the script on the adress

https://localhost/test.php

axios 调用是

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

但出于某种原因，我无法弄清楚我仍然得到

But for some reason which i cant figure out I'm still getting

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

先谢谢你.我很乐意为您提供任何提示.

Thank you in advance. I'll be happy for any tips.

推荐答案

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

Your axios call is going to make the request to the API with whatever protocol the webpage is on.

错误表明您正在进行 http 调用，但您的 webpack 配置只是欺骗 https.您是从提出请求的页面访问 https 吗?

The error shows that you’re making an http call but your webpack config is only spoofing https. Are you visiting https from the page making the request?

例如 https://localhost:8080

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

You can also try updating your webpack proxy server to look like this

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

其他调试步骤:从终端卷曲您的 Api 端点以查看它是否是协议问题

Additional debug steps: curl your Api endpoint from your terminal to see if it’s a protocol issue

这篇关于Vue.js - vue.config.js 中的代理被忽略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！