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

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

但我的API在：

我想在网页包中使用代理选项，但它不起作用。我得到了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查询。但它不起作用。这里怎么了

---

谢谢。

使用代理时，您必须将请求发送到

localhost

，以便代理可以将它们重定向到远程服务器，而无需COR。在您的

$.ajax（）

中，传递

url:“/api”

---

之后，当您在本地运行应用程序时，您的请求将发送到

http://localhost:3000/api

以及当它在

http://desarrollo.com

它将向

http://desarrollo.com/api

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

查找主机名：

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:

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",
})

---

这将在网页包开发服务器以及应用程序服务器（例如Apache）中工作，您好！非常感谢你的回答。我做到了。我的API是用Laravel+CAS+Apache2完成的。由于我需要一个API子例程（/API/perfil），所以我使用了AJAX（url='/API/perfil'），但是我仍然有CORS错误：

XMLHttpRequest无法加载https://autentica-des.upct.es/cas/login?service=http%3a%2f%2fingeniaticupct.ddns.net%2fapi%2fperfil%2fapi%2fperfil. 对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许来源”标头。起源'http://localhost:3000因此不允许访问。

谢谢。在您的网页配置中，您显示了

http://desarrollo.com

。但是现在显示的错误来自

https://autentica-des.upct.es

。我认为您从本地主机发出的其他一些请求没有被代理是的<代码>http://desarrollo.com是我的API的宿主。当我呼叫

http://desarrollo.com/api/perfil

我有一个连接到CAS的服务，可以将我的个人数据返回给我。好的，但您似乎是直接从客户端而不是从代理服务器向CAS发出请求。您需要为此域创建另一个代理。我很快会更新我的答案。嗯，但在那之前，你能展示一下确切的代码，那个请求是如何提出的吗？进入

https://autentica-des.upct.es

我将其添加到我的网页配置文件的顶部，但我在

npm run service

上生成了一个错误。非常感谢。