首页 > 解决方案 > Flutter WEB请求到本地服务器

问题描述

我遇到了一个问题,我正在使用 dio 来执行 http 请求,但我得到了这个错误,即使我使用“http”依赖而不是“dio”,我也使用了 ip、localhost 和 127.0.0.1 地址但没有作品。

在此处输入图像描述

标签: flutterserverbackendflutter-web

解决方案


你得到的错误

XMLHttp 请求错误

您很可能没有在后端响应中启用CORS:跨域资源共享,这将使您可以使用指定的网站访问您的后端。

由于您使用的是 javascript,因此您必须在后端设置 CORS 并告诉后端您要从 javascript 应用程序发送请求。

要为每个网站启用 CORS,请将此标头添加到后端的响应标头中

Access-Control-Allow-Origin: *

原产地意思

Web 内容的来源由用于访问它的 URL 的方案(协议)、主机名(域)和端口定义。仅当方案、主机名和端口都匹配 ( ref )时,两个对象才具有相同的来源

因此,这将允许每个网站访问您的后端,您可以通过替换*为您的网站地址来更改它。

其他 CORS 标头

还有许多其他选项可以在响应标头中使用并限制传入请求请参阅Mozilla的 Cross-Origin Resource Sharing文档

Access-Control-Allow-Methods: POST, GET, OPTIONS

Access-Control-Request-Method 标头作为预检请求的一部分通知服务器,当实际请求发送时,它将使用 POST 请求方法发送

Access-Control-Allow-Headers: X-PINGOTHER, Content-Type

Access-Control-Request-Headers 标头通知服务器,当实际请求发送时,它将与 X-PINGOTHER 和 Content-Type 自定义标头一起发送。服务器现在有机会确定它是否希望在这些情况下接受请求。

Access-Control-Max-Age: 86400

最后,Access-Control-Max-Age 以秒为单位给出对预检请求的响应可以缓存多长时间而不发送另一个预检请求的值。在这种情况下,86400 秒是 24 小时。请注意,每个浏览器都有一个最大内部值,当 Access-Control-Max-Age 较大时,该值优先。


推荐阅读