CORS 问题如果 "Content-type": "multipart/form-data"
CORS problem if "Content-type": "multipart/form-data"
我有两个域(example.com 用于客户端,api.example.com 用于休息 API)我从客户端向 API 请求考虑 CORS政策。
预检请求按预期工作,除文件上传外,其他所有请求(GET/POST/PUT/DELTE)都工作正常,这意味着如果 Content-type 为 "multipart/form-data".
我在 Chrome 控制台中收到以下错误:
Access to XMLHttpRequest at 'https://api.example.com/video/upload' from origin 'https://www.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
这里是我的客户端(vuejs)来源:
var config = {
headers: { "Content-Type": "multipart/form-data" },
onUploadProgress(e) {
if (e.lengthComputable) {
self.percentage = Math.round(e.loaded / e.total * 100) + "%";
}
}
};
axios
.post(apiUrl + `/video/upload`, formData, config)
.then(response => {
this.successes.push(
response.data.videoName + " uploaded."
);
})
.catch(e => {
this.errors.push(message);
});
},
以及 CORS 的 nginx 配置:
server {
listen 443 ssl default_server http2;
listen [::]:443 ssl default_server ipv6only=on;
root /var/www/example/public;
index index.php index.html index.htm;
server_name api.example.com:443;
add_header Access-Control-Allow-Origin "*" always;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";
add_header Access-Control-Allow-Methods "GET, POST, PUT, OPTIONS, DELETE";
add_header Access-Control-Allow-Headers "Content-Type, X-Auth-Token, Origin, Authorization";
任何人都可以让我知道这段代码和配置有什么问题吗?!
感谢任何帮助!
通过在应用程序端应用 CORS 解决了它。
具体来说,当浏览器发送预检请求时,会出现错误。因此,对于预检请求,我在应用程序端手动添加了 Headers。
我一直在使用 Laravel 作为后端,因此将 Cors 中间件创建为 floowing:
public function handle($request, Closure $next) {
if ($request->getMethod() == "OPTIONS") {
$headers = [
'Access-Control-Allow-Methods' => 'POST, GET, OPTIONS, PUT, DELETE',
'Access-Control-Allow-Headers' => 'Content-Type, Origin, Authorization'
];
return \Response::make('OK', 200, $headers);
}
return $next($request);
}
我有同样的问题,请求 (GET/POST/PUT/DELTE) 都有效,只有 Content-type:"multipart/form-data" 的文件上传有 CORS 问题。
我用 headers "Access-Control-Allow-Origin ,Access-Control-Allow-Methods, Access-Control-Allow-Headers" 尝试了很多次。还是不行
最后,我发现nginx限制了上传文件的大小。
所以,我在 nginx conf 文件中添加 "client_max_body_size 10M" 。
cors 问题已解决。
我有两个域(example.com 用于客户端,api.example.com 用于休息 API)我从客户端向 API 请求考虑 CORS政策。 预检请求按预期工作,除文件上传外,其他所有请求(GET/POST/PUT/DELTE)都工作正常,这意味着如果 Content-type 为 "multipart/form-data".
我在 Chrome 控制台中收到以下错误:
Access to XMLHttpRequest at 'https://api.example.com/video/upload' from origin 'https://www.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
这里是我的客户端(vuejs)来源:
var config = {
headers: { "Content-Type": "multipart/form-data" },
onUploadProgress(e) {
if (e.lengthComputable) {
self.percentage = Math.round(e.loaded / e.total * 100) + "%";
}
}
};
axios
.post(apiUrl + `/video/upload`, formData, config)
.then(response => {
this.successes.push(
response.data.videoName + " uploaded."
);
})
.catch(e => {
this.errors.push(message);
});
},
以及 CORS 的 nginx 配置:
server {
listen 443 ssl default_server http2;
listen [::]:443 ssl default_server ipv6only=on;
root /var/www/example/public;
index index.php index.html index.htm;
server_name api.example.com:443;
add_header Access-Control-Allow-Origin "*" always;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";
add_header Access-Control-Allow-Methods "GET, POST, PUT, OPTIONS, DELETE";
add_header Access-Control-Allow-Headers "Content-Type, X-Auth-Token, Origin, Authorization";
任何人都可以让我知道这段代码和配置有什么问题吗?! 感谢任何帮助!
通过在应用程序端应用 CORS 解决了它。
具体来说,当浏览器发送预检请求时,会出现错误。因此,对于预检请求,我在应用程序端手动添加了 Headers。 我一直在使用 Laravel 作为后端,因此将 Cors 中间件创建为 floowing:
public function handle($request, Closure $next) {
if ($request->getMethod() == "OPTIONS") {
$headers = [
'Access-Control-Allow-Methods' => 'POST, GET, OPTIONS, PUT, DELETE',
'Access-Control-Allow-Headers' => 'Content-Type, Origin, Authorization'
];
return \Response::make('OK', 200, $headers);
}
return $next($request);
}
我有同样的问题,请求 (GET/POST/PUT/DELTE) 都有效,只有 Content-type:"multipart/form-data" 的文件上传有 CORS 问题。 我用 headers "Access-Control-Allow-Origin ,Access-Control-Allow-Methods, Access-Control-Allow-Headers" 尝试了很多次。还是不行
最后,我发现nginx限制了上传文件的大小。 所以,我在 nginx conf 文件中添加 "client_max_body_size 10M" 。
cors 问题已解决。