我使用 MEAN Stack 用户注册和登录示例和教程 作为我的应用程序的基础。它为 run 函数中的每个请求添加了一个 auth 标头:
$http.defaults.headers.common['Authorization'] = 'Bearer ' + $window.jwtToken;
我想将图像上传到 Cloudinary,但收到此错误:
XMLHttpRequest 无法加载 https://api.cloudinary.com/v1_1/xxxx/upload。预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段授权。
如何专门针对对 Cloudinary 的请求删除此标头?
您将需要一个拦截器来检查请求的 url,并在匹配时清除标头。或者,您可以使用
$http
配置参数。
使用参数:
$http.post('https://api.cloudinary.com/v1_1/' + someId + '/upload', data, { headers: {} });
使用拦截器:
.factory('cloudinaryInterceptor', function() {
return {
request: function(config){
//Check for the host
var regex = /api\.cloudinary\.com/i;
if(regex.test(config.url))
//Detach the header
delete config.headers.authorization;
return config;
}
}
});
记得在config阶段推送拦截器
$httpProvider.interceptors.push('cloudinaryInterceptor');
这个问题之前已经被问过。答案可以在这里找到。
当您开始使用自定义请求标头时,您将获得 CORS 预检。这是一个使用 HTTP OPTIONS 动词并包含多个标头的请求,其中一个是 Access-Control-Request-Headers,列出了客户端希望包含在请求中的标头。
您需要使用适当的 CORS 回复 CORS 预检 标题来完成这项工作。其中之一确实是 访问控制允许标头。该标头需要包含相同的内容 值包含(或更多)的 Access-Control-Request-Headers 标头。