Vue ProxyTable 在 axios 中不起作用

Question

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

我的 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。

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

Answer 1

可能会在启用调试选项的情况下得到第一个提示：

logLevel: 'debug'

如果你在终端中npm运行dev，你应该看到一个注释，说明在启动服务器时使用代理表。

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

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

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

我在使用代理时也遇到了一些问题，但这不是由于 axios：webpack 代理表不工作

干杯Michael

Answer 2

通过将本地主机替换为 127.0.0.1 来解决！

Answer 3

这是一个

问题。您需要跨域请求。配置您的 Web 服务器： Access-Control-Allow-Origin *

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

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