Question

我想在localhost上运行我的项目：3000 / upct / ROUTES

我想在Webpack中使用代理选项，但它不起作用。我得到CORS和其他人的错误...我的代理配置看起来像：

    CONFIG.devServer = {
        //host: 'localhost',
        port: 3000,
        proxy: {
            '/api/**': {
                target: 'http://desarrollo.com/api',
                secure: false,
                changeOrigin: true
            }
        },
        contentBase: PATH.join(__dirname, '/src'),
        hot: true,
        inline: true,
        historyApiFallback: true/*,
        headers: { 
            'Content-Type': 'text/plain',
            'Access-Control-Allow-Origin' : '*',
            'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE'
        }*/
    };

我的AJAX查询如下：

    $.ajax({
        url: "http://desarrollo.com/api",
        data: "",
        type:"GET",
        dataType: "JSON",
    })
    .done((respuesta) => {
        console.log(respuesta);

    }).fail(function(xhr, textStatus, errorThrown){
        console.log("XHR: ", xhr/*.responseText*/, "Text Status: ", textStatus + '\n' + "Error Thrown: ", errorThrown);
    })

我支持代理用于在没有CORS错误的情况下对我的API执行AJAX查询。但它没有用。这有什么不对？

谢谢。

Answer 1

使用代理时，您必须将请求发送到localhost，以便代理可以将它们重定向到没有CORS的远程服务器。在$.ajax()通行证url: "/api"。

之后，当您在本地运行应用时，您的请求将发送至http://localhost:3000/api，当它在http://desarrollo.com上运行时，它会向http://desarrollo.com/api发送请求。

Answer 2

要向@GProst响应添加更多内容，以下更改将有效。

查找协议：

this.protocol = () => {
        let returnValue = 'https://';
        if (location.protocol !== 'https:') {
            returnValue = 'http://';
        }
        return returnValue;

};

查找主机名：

const hostName = window.location.hostname + (!window.location.port === false ? ':' + window.location.port : '');

必填网址

const URL = this.protocol() + hostName;

现在，可以在Ajax中使用以上URL。

$.ajax({
    url: URL,
    data: "",
    type:"GET",
    dataType: "JSON",
})

这适用于 webpack-dev-server 以及应用服务器，例如的的Apache

Webpack dev服务器代理无法正常工作 - ReactJS

2 个答案: