HTTP请求已被Cors扑朔迷离的网络政策所阻止 [英] http request is blocked by Cors policy for flutter web

问题描述

我有一个使用php作为后端的Android，Ios和Web应用程序.所有的Api在android和ios上都可以正常工作，但是会在网络上抛出CORS错误.遇到这样的错误

I have an Android, Ios and web app that's using php as a backend. All Api's are working fine in both android and ios but throwing CORS error in web. Getting error like this

CORS策略已阻止从原始地址"http://localhost:49168"访问"https://example.com/api"处的XMLHttpRequest:在该地址上不存在"Access-Control-Allow-Origin"标头请求的资源.

Access to XMLHttpRequest at 'https://example.com/api' from origin 'http://localhost:49168' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我尝试发送标头:{'Access-Control-Allow-Origin':'http://localhost:49168'，" Origin" ;:" http://localhost:49168"}，发出http请求.如果我为Chrome添加了CORS扩展名，则网络运行正常.请帮帮我

I tried to send headers: {'Access-Control-Allow-Origin': 'http://localhost:49168', "Origin": "http://localhost:49168" }, to http request. Web is working smoothly if i add CORS extension for chrome. Please help me out

推荐答案

两个星期前，同样的问题困扰着我.对我来说，以下错误为我提供了检查问题的错误方向:

The same problems hit me two weeks ago. For me, the following error is giving me a wrong direction to checking the problem:

从源访问"https://example.com/api"处的XMLHttpRequest"http://localhost:49168"已被CORS政策阻止:否请求中存在"Access-Control-Allow-Origin"标头资源.

Access to XMLHttpRequest at 'https://example.com/api' from origin 'http://localhost:49168' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

它说明了有关请求的内容，但事实证明与请求无关.而且它也与Web服务器无关(在我的情况下为 apache 或 nginx ).

It says something about the request, but turns out it had nothing to do with the request. And it also had nothing to do with the web server (apache or nginx in my case).

解决方案是通过在后端的响应中添加标头(是，响应).我不知道 php 代码的解决方案，但是我在golang后端中使用以下代码向响应中添加标头:

The solution is by adding header to the response (yes, response) from your backend. I don't know the solution for php code, but I use the following code in my golang backend to add header to the response:

// 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请求已被Cors扑朔迷离的网络政策所阻止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！