Question

我尝试为React的演示文稿开发一个小示例Web应用程序。我将使用React作为前端（在localhost：3000下运行）和Tomcat 9（在localhost：8080下运行）并使用HTML5 fetch API发出请求。

我的目标是为受众（将连接到同一本地网络）提供使用浏览器连接到应用程序的能力，并维护会话。

我对网络的理解非常浅薄，因此我总是无法做到这一点。

我当前（失败）的方法是：

我运行 ifconfig 来获取我的IP地址（例如http://192.168.0.18）并告诉受众，以便他们连接到http://192.168.0.18:3000这是前端应用

使用相同的IP，但使用端口8080来定义后端URL基础，并进行获取：

const SERVER_BASE_URL = "http://192.168.0.18:8080";
return fetch(SERVER_BASE_URL+"/graphql", {
    method:"POST",
    body: JSON.stringify({
        query:query,
        params:params
    }),
    mode:"cors",
    credentials:"include"
});

在Tomcat上，我尝试通过在Servlet实现类上添加头来启用CORS支持：

@Override
public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
    HttpServletRequest httpReq = (HttpServletRequest)req;
    HttpServletResponse httpRes = (HttpServletResponse)res;
    httpRes.setHeader("Access-Control-Allow-Origin","*");
    //...
}

到目前为止，我可以在浏览器的网络标签中看到请求，并且会话变量似乎可以正确维护。

但浏览器拒绝处理回复说：

无法加载http://192.168.0.18:8080/graphql：该值的值响应中的“Access-Control-Allow-Origin”标头不能是当请求的凭据模式为“include”时，为通配符'*'。起源因此，“http://192.168.0.18:3000”不允许访问。

因此，我尝试将fetch参数凭据设置为“省略”。然后，错误消失了，但会话也是如此。

我的下一个想法是，正如错误所提到的那样，将*标题中的Access-Control-Allow-Origin替换为我想要允许的确切来源。问题出在我的情况下，这包含我的本地IP地址，我事先无法知道。

我的问题：

有没有办法获取可预测的源名称，所以我可以将它用于我的客户端应用程序并说Tomcat允许它，而不是使用*符号，或具有Access-Control-Allow-Origin：*工作？

Answer 1

请求中的Origin标头包含发送请求的来源，您可以使用httpReq.getHeader("Origin")从代码中获取该值。

因此，您可以这样做而不是httpRes.setHeader("Access-Control-Allow-Origin","*")：

httpRes.setHeader("Access-Control-Allow-Origin", httpReq.getHeader("Origin"))

使Tomcat echo在Access-Control-Allow-Origin中请求源（以避免“当凭据模式为'include'时，不得为通配符”）

1 个答案: