Question

我正在尝试从我的角度网络应用程序上传foursquare用户的个人资料照片。我正在使用＆＃34;用户/更新＆＃34;终点 - 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 错误。

Answer 1

您可能希望首先从前端JavaScript代码中删除以下内容：

headers.append("Access-Control-Allow-Origin","true")

Access-Control-Allow-Origin是要发送的服务器的响应标头;将其添加为请求标头的唯一效果是触发CORS preflight OPTIONS request即失败。

您现在看到的是，因为您的代码将Access-Control-Allow-Origin添加为请求标头，您的浏览器正在发送CORS preflight OPTIONS request;并且为了让浏览器认为预检成功，https://api.foursquare.com/v2/users/self/update端点必须使用200 OK或204状态代码响应OPTIONS请求。

但是，您所获得的405“（不允许的方法）”响应表明Foursquare API端点未配置为处理OPTIONS请求。因此，预检失败，您的浏览器永远不会继续执行POST请求您尝试发送的代码。

但是，来自该Foursquare API端点的非OPTIONS请求的响应确实包含Access-Control-Allow-Origin响应标头。因此，只要您没有从客户端添加Access-Control-Allow-Origin，并且只要请求中没有其他特征会触发浏览器进行预检，问题中的代码应该按预期工作。

Answer 2

如果在部署后在IIS上发生此问题，我建议您将其添加到Web.config中的标记内：

<modules>
    <remove name="WebDAVModule" />
</modules>

CORS预检的响应为405（方法不允许）错误

2 个答案: