我正在尝试从我的 Angular Web 应用程序上传 foursquare 用户的个人资料照片。我正在使用“用户/更新”端点 - https://developer.foursquare.com/docs/users/update
这是我的模板,
<input type="file" (change)="fileChange($event)" placeholder="Upload file">
这是我的组件代码,
fileChange(event) {
let fd:FormData=new FormData();
fd.append("photo",event.target.files[0]);
let headers=new Headers();
headers.append("Content-Type","multipart/form-data");
headers.append("Accept","application/json");
headers.append("Access-Control-Allow-Origin","true");
let options=new RequestOptions({headers:headers});
this.http.post("https://api.foursquare.com/v2/users/self/update?oauth_token=myauthtoken&v=20160108",fd,options)
.map(response=>response.json())
.subscribe(
data=>console.log(data),
error=>console.log(error)
);
}
我在控制台中收到 405(方法不允许) 和预检响应包含无效的 HTTP 状态代码 405 错误。
最佳答案
您可能希望首先从前端 JavaScript 代码中删除以下内容:
headers.append("Access-Control-Allow-Origin","true")
Access-Control-Allow-Origin
是服务器发送的响应 header ;将其添加为请求 header 的唯一效果是触发 CORS preflight OPTIONS
request那会失败。
您现在看到的情况是,由于您的代码添加了 Access-Control-Allow-Origin
作为请求 header ,因此您的浏览器正在发送 CORS preflight OPTIONS
request ;为了让浏览器认为预检成功,https://api.foursquare.com/v2/users/self/update
端点必须响应 OPTIONS
请求200 OK 或 204 状态代码。
但是您收到的 405“(方法不允许)”响应表明 Foursquare API 端点未配置为处理 OPTIONS
请求。因此,预检失败,您的浏览器永远不会继续执行 POST
请求它尝试发送的代码。
但是,对来自该 Foursquare API 端点的非OPTIONS
请求的响应确实包含 Access-Control-Allow-Origin
响应 header 。因此,只要您不从客户端添加 Access-Control-Allow-Origin
,并且只要请求没有其他特征,问题中的代码就应该按预期工作。触发浏览器进行预检。
关于angular - CORS 预检的响应是 405(不允许方法)错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45749375/