Haskell 从UI应用程序向服务服务器进行提取调用时出现CORS问题

我发现了很多与CORS相关的问题，但没有一个能解决我的问题。由于我是web开发新手，我非常感谢任何帮助我建立并运行项目基础设施的帮助

我的申请由两部分组成：

服务器部件

• 用仆人哈斯克尔做的服务器。我一直尝试连接的最重要端点是：

类型不受保护=
“登录”
：>ReqBody'[JSON]凭据
：>动词'POST 204'[JSON]（标题'[Header“Set Cookie”SetCookie，标题“Set Cookie”SetCookie]NoContent）

它基于此处描述的项目：

我已经发现了一个关于CORS的问题，但那没有帮助

在开发过程中，我在端口8081上启动服务器

用户界面部分

• 我还有一个UI项目，它独立托管在端口8833上。它使用网页包。我还发现了一些关于CORS的SO帖子，建议使用：

那也没用

问题描述： 当我在UI项目中进行“fetch”调用时，尝试与我获得的服务端点通信：

Access to fetch at 'http://localhost:8081/login' from origin 'http://localhost:8833' 
has been blocked by CORS policy: Response to preflight request doesn't pass access control
check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an 
opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource 
with CORS disabled.

我使用fetch的方式：

let数据={
credentialsUserName:this.state.login，
credentialsPassword:this.state.password
};
let opts:RequestInit={
方法：“张贴”，
标题：新标题（{“内容类型”：“应用程序/json”}），
正文：JSON.stringify（数据）
};
取回（“http://localhost:8081/login，选择）。然后（（值）=>{
console.log（值）；
//以后做点什么
});

问题 我该怎么做才能使仆人的取货工作顺利进行呢。另外，我的应用程序架构有什么问题吗？也许有更好的设计方法

最后一件事：我的应用程序的整个代码都很长，所以我决定在这里只放最重要的部分。如果需要，请随时提出更多要求

编辑1 发送提取请求后，我可以在浏览器的“网络”选项卡中看到两个条目

第一个标题如下：

content-type: application/json
Referer: http://localhost:8833/Login
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36

以及我在其主体中包含的json数据。它的状态是“（失败）net:：ERR_failed”

另一个的状态为400，包含更多标题：

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Connection: keep-alive
Host: localhost:8081
Origin: http://localhost:8833
Referer: http://localhost:8833/Login
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36

有趣的是，在“常规”选项卡中，我可以看到：

Request URL: http://localhost:8081/login
Request Method: OPTIONS
Status Code: 400 Bad Request
Remote Address: 127.0.0.1:8081
Referrer Policy: no-referrer-when-downgrade

请求方法“选项”看起来很神秘。为什么在那里

作为一个快速猜测，我尝试在Haskell一侧的CORS定义中添加“选项”，但这次也没有运气：

port:：Int
端口=8081
企业策略：：中间件
corsPolicy=cors（const$Just policy）
哪里
策略=simpleCorsResourcePolicy
{corsMethods=[“获取”、“发布”、“放置”、“选项”]}
main:：IO（）
main=do
迁移的
jwtConfig如果您的服务器使用
Wai
（我假设它使用），那么您可能会想要使用Package响应的HTTP状态代码是什么？您可以使用浏览器devtools中的网络窗格进行检查。如果Chrome开发工具没有显示，请使用Firefox开发工具中的网络窗格进行检查。这是4xx还是5xx错误，而不是200次成功响应？@sideshowbarker很有意思——有趣的是，我可以看到两个条目——一个状态为“（失败）net:：ERR_failed”，另一个状态为“400（错误请求）”。这表明UI/网页包配置存在问题。让我在我的主要帖子中添加更多关于请求的细节。是的，基于这些信息，我想说实际上没有CORS问题。相反，这些故障最终导致浏览器要么根本没有收到响应（在ERR_FAILED中），要么接收到缺少Access Control Allow Origin response标头的响应（在400错误请求的情况下，这是正常的，并且预期响应不会有Access Control Allow Origin response标头）。因此，在这一点上，你可能想要么完全重写这个问题，要么重新聚焦于实际问题，而不是CORS（这不是原因）。-或者发布一个新的单独问题。选项请求之所以存在，是因为添加
内容类型：application/json
请求头会触发浏览器在尝试代码中的实际post请求之前发送CORS飞行前选项请求。如果飞行前的请求失败，浏览器将立即停止，不再尝试飞行后的请求。CORS预飞失败的原因是，响应是400错误。为了飞行前的成功，响应必须是200 OK。因此，您需要配置
http://localhost:8081/login“
服务器以200而不是400的状态代码响应选项请求。如果您的服务器使用
Wai
（我假设是这样），则您可能需要使用Package响应的HTTP状态代码是什么？您可以使用浏览器devtools中的网络窗格进行检查。如果Chrome开发工具没有显示，请使用Firefox开发工具中的网络窗格进行检查。这是4xx还是5xx错误，而不是200次成功响应？@sideshowbarker很有意思——有趣的是，我可以看到两个条目——一个状态为“（失败）net:：ERR_failed”，另一个状态为“400（错误请求）”。这表明UI/网页包配置存在问题。让我在我的主要帖子中添加更多关于请求的细节。是的，基于这些信息，我想说实际上没有CORS问题。相反，这些故障最终导致浏览器要么根本没有收到响应（在ERR_FAILED中），要么接收到缺少Access Control Allow Origin response标头的响应（在400错误请求的情况下，这是正常的，并且预期响应不会有Access Control Allow Origin response标头）。因此，在这一点上，你可能想要么完全重写这个问题，要么重新关注实际问题，而不是CORS（这不是原因）——或者发布一个新的独立问题。
Request URL: http://localhost:8081/login
Request Method: OPTIONS
Status Code: 400 Bad Request
Remote Address: 127.0.0.1:8081
Referrer Policy: no-referrer-when-downgrade

corsPolicy :: Middleware
corsPolicy = cors (const $ Just policy)
    where
        policy = simpleCorsResourcePolicy
          { 
              corsMethods = [ "GET", "POST", "PUT", "OPTIONS" ],
              corsOrigins = Just (["http://localhost:8833"], True),
              corsRequestHeaders = [ "authorization", "content-type" ]
          }