http请求被Cors策略阻止

Question

我有一个Android, Ios和web应用程序，使用php作为后端。所有Api在android和ios上都工作得很好，但在web上抛出CORS错误。出现如下错误

从源'http://localhost:49168'访问'https://example.com/api'的XMLHttpRequest已被CORS策略阻止:请求的资源上没有'Access- control - allow - origin '标头。

我试着发送headers: {'Access-Control-Allow-Origin': 'http://localhost:49168'，"Origin"http://localhost: 49168"}，到HTTP请求。Web工作顺利，如果我添加CORS扩展chrome。请帮帮我吧

Answer 1

两周前我也遇到了同样的问题。对于我来说，下面的错误给了我一个错误的方向来检查问题:

从origin访问'https://example.com/api'的XMLHttpRequest"http://localhost:49168"已被CORS政策屏蔽:没有"访问-控制-允许-起源"标头出现在请求上资源。

它说了一些关于请求的内容，但结果证明它与请求无关。它也与web服务器(在我的情况下是apache或nginx)无关。

解决方案是通过在响应中添加报头(是的，响应))。我不知道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.")
}
}

Answer 2

我想发布我的解决方案，因为我的服务器的CORS配置正确(据我所知)，阻塞似乎是Flutter框架的结果。我认为我通过从请求头中删除Cookie来解决我的问题。根据我的理解，这相当于withCredentials = false。在我发出请求之前，我添加了以下代码:

request.headers.remove('Cookie');

希望这能帮助到一些人，因为我发现解决CORS问题是发布一个Flutter应用程序到网络的最难的部分。如果有人对这个问题有更好的见解，那么我绝对乐意了解更多。

如果你需要了解我的环境，那么我使用Django, Django REST框架和django-cors-headers:

INSTALLED_APPS = [
...,
"corsheaders",
...,
]
MIDDLEWARE = [
...,
# Place CorsMiddleWare above any middleware that may return a response.
"corsheaders.middleware.CorsMiddleware",
'django.middleware.security.SecurityMiddleware',
...,
]
# Allow CORS from the following domains.
# See: https://github.com/adamchainz/django-cors-headers/tree/main
CORS_ALLOWED_ORIGIN_REGEXES = [
r"^https://w+.your-domain.com$",
]

我还为Flutter配置了以下内容:

1. 我已将--disable-web-security添加到$FLUTTER_SDK/packages/flutter_tools/lib/src/web/chrome.dart
2. 我发现有必要在flutter build web --web-renderer html之前运行flutter clean & flutter pub get。我发现--web-renderer html是必要的。

这是我的代码，使一个POST请求从我的Flutter应用程序:

import 'package:http/http.dart' as http;
// Define your request.
final client = http.Client();
final request;
final body = jsonEncode(data); // Here you can pass your data.
String idToken = await getUserToken(); // In my case I'm passing a user token.
String url = 'your-api.com';
// Define your headers.
final headers = {
'Content-Type': 'application/json;charset=UTF-8',
'Accept': 'application/json',
'Authorization': 'Bearer $idToken',
}
// Create a POST request.
request = http.Request('POST', Uri.parse(url))
..headers.addAll(headers)
..body = body;
// Ensure the client doesn't add cookies.
request.headers.remove('Cookie');
// Get the response.
final response = await client.send(request).then(http.Response.fromStream);