内容类型:多部分/表单数据&的CORS问题 [英] CORS problem if "Content-type": "multipart/form-data"
本文介绍了内容类型:多部分/表单数据&的CORS问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有两个域(对于客户端,Example.com用于REST API),在这两个域中,考虑到CORS策略,我从客户端请求到API。 印前检查请求按预期工作,其他所有请求(GET/POST/PUT/DELTE)工作正常,但文件上载除外,这意味着如果内容类型为"MultiPart/Form-Data"。
我在Chrome控制台中看到以下错误:
CORS策略已阻止从源‘https://www.example.com’访问位于‘https://api.example.com/video/upload’的XMLHttpRequest:请求的资源上不存在‘Access-Control-Allow-Origin’标头。
这里是我的客户(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解决了此问题。
具体来说,当浏览器发送印前检查请求时,会出现错误。因此,对于印前检查请求,我在应用程序端手动添加了标头。 我一直使用Laravel作为后台,所以创建了CORS中间件如下:
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);
}
这篇关于内容类型:多部分/表单数据&的CORS问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文