http 请求被 Flutter Web 的 Cors 策略阻止
Posted
技术标签:
【中文标题】http 请求被 Flutter Web 的 Cors 策略阻止【英文标题】:http request is blocked by Cors policy for flutter web 【发布时间】:2021-05-19 05:07:31 【问题描述】:我有一个使用 php 作为后端的 android、ios 和网络应用程序。所有 Api 在 android 和 ios 中都运行良好,但在 web.xml 中抛出 CORS 错误。 出现这样的错误
CORS 策略已阻止从源“http://localhost:49168”访问“https://example.com/api”处的 XMLHttpRequest:不存在“Access-Control-Allow-Origin”标头请求的资源。
我尝试发送 标头:'Access-Control-Allow-Origin': 'http://localhost:49168', “来源”:“http://localhost:49168” , 到http请求。 如果我为 chrome 添加 CORS 扩展,Web 工作顺利。请帮帮我
【问题讨论】:
***.com/questions/60191683/… 的可能重复项? 我正在使用表单数据。我应该在哪里添加这些请求? 您的 API 需要发送访问控制允许来源“您的域”/“*”标头。我建议阅读 CORS developer.mozilla.org/en-US/docs/Web/HTTP/CORS 我已经发送了 post 请求但是抛出了同样的错误 CORS 不是您从前端 (Flutter) 控制的东西。您的 PHP API 必须发送这些标头。我发送的链接中对此进行了概述。 【参考方案1】:两周前我遇到了同样的问题。对我来说,以下错误给了我检查问题的错误方向:
从源访问“https://example.com/api”处的 XMLHttpRequest 'http://localhost:49168' 已被 CORS 策略阻止:否 请求中存在“Access-Control-Allow-Origin”标头 资源。
它说明了请求,但事实证明它与请求无关。它也与网络服务器无关(在我的例子中是apache
或nginx
)。
解决方案是在后端的响应中添加标头(是的,response)。我不知道 php
代码的解决方案,但我在我的 golang 后端使用以下代码将标头添加到响应中:
// Adding CORS header to response.
func (server *WebUploadServer) addCorsHeader(res http.ResponseWriter)
headers := res.Header()
// use your domain or ip address instead of "*".
// Using "*" is allowing access from every one
// only for development.
headers.Add("Access-Control-Allow-Origin", "*")
headers.Add("Vary", "Origin")
headers.Add("Vary", "Access-Control-Request-Method")
headers.Add("Vary", "Access-Control-Request-Headers")
headers.Add("Access-Control-Allow-Headers", "Content-Type, Origin, Accept, token")
headers.Add("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
// Here we handle the web request.
func (server *WebUploadServer) webHandler(w http.ResponseWriter, r *http.Request)
fmt.Println("Endpoint hit")
server.addCorsHeader(w) // Here, we add the header to the response
switch r.Method
case "POST":
// do something here.
case "OPTIONS":
w.WriteHeader(http.StatusOK)
case "GET":
fallthrough
default:
fmt.Fprintf(w, "Sorry, only POST method is supported.")
【讨论】:
以上是关于http 请求被 Flutter Web 的 Cors 策略阻止的主要内容,如果未能解决你的问题,请参考以下文章
Flutter Web 在托管时卡在 Http 请求上 - 在本地工作正常
在 Flutter Web 应用程序中对 http 和 https API 服务器的 http GET 请求发生异常
无法从 Flutter Web 上的 localhost API(node js express)获取 http 请求的响应 [重复]