Webpack 开发服务器代理不工作 - ReactJS

Question

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

但我的 API 在：http://desarrollo.com/api

我想在 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);
    })

我认为代理是用于在我的 API 中执行 AJAX 查询而不会出现 CORS 错误。但它不起作用。这里有什么问题？

谢谢。

Answer 1

要向@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;

现在上面的 URL 可以在 Ajax 中使用了。

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

这将适用于 webpack-dev-server 以及应用程序服务器，例如阿帕奇。

Answer 2

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

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