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。

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

Answer 1

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

logLevel: 'debug'

如果您在终端中运行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

干杯，迈克尔

Answer 2

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

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

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

Answer 3

通过将localhost替换为127.0.0.1解决问题！

Vue ProxyTable在axios中不起作用

3 个答案: