Vue ProxyTable 在 axios 中不起作用答案

【问题标题】：Vue ProxyTable does not work in axiosVue ProxyTable 在 axios 中不起作用
【发布时间】：2017-11-16 08:43:49
【问题描述】：

我正在做一个端到端的分离项目，我的后端已经完成。现在遇到了跨域问题

我的 Vue 代码：

// config/index.js
proxyTable: {
    "/api":{
        target: "http://localhost:8001",
        changeOrigin: true,
        secure: false,
        pathRewrite:{
            "^/api":"/api"
        }
    }

this.$axios.get("/api/user/login?username=xx&password=123")
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

如果我在浏览器中访问http://localhost:8001/api/user/login?username=xx&password=123，它会返回我编写的 JSON。

但它在 axios 中不起作用，错误为 GET http://localhost:8085/api/user/login?username=xx&password=123 504 (Gateway Timeout)。

【问题讨论】：

可能是 CORS 问题，请检查您的网络选项卡，在 chrome/firefox 控制台中查看该请求的错误。
错误提示`尝试代理时出错：localhost:8085/api/user/login?username=xx&password=123`
不要检查控制台，检查网络标签
状态码是 504 Gateway Timeout ，响应是 Error occurred while trying to proxy to: localhost:8085/api/user/login?username=xx&password=123
我的意思是检查你的浏览器控制台，打开它去network标签并点击response标签

标签： vue.js cross-domain frontend axios

【解决方案1】：

启用调试选项后，您可能会得到第一个提示：

logLevel: 'debug'

如果您在终端中 npm run dev，您应该会看到一条说明，说明在启动服务器时使用了代理表。

[HPM] Subscribed to http-proxy events:  [ 'error', 'close' ]

稍后，运行您的应用程序，您应该会看到调用的代理路由，例如

[HPM] GET /static/api/returnReasons/returnReasons.php -> http://vuetools:8888

我在使用代理时也遇到了一些问题，但这不是由于 axios： webpack proxyTable is not working

干杯，迈克尔

【讨论】：

【解决方案2】：

通过将 localhost 替换为 127.0.0.1 解决！

【讨论】：

【解决方案3】：

这是一个 CORS 问题。您需要一个跨域请求。配置您的网络服务器： Access-Control-Allow-Origin *

你也可以直接在 axios 中自定义 headers，通过参数传递它们： headers: {'Access-Control-Allow-Origin': '*'},

我遇到了类似的问题，但我没有得到结果，尽管 axiosis 的文档说这是正确的解决方案。

【讨论】：