![](/img/trans.png)
[英]Purpose of Content-Type undefined in AngularJS FileUpload
[英]Posting to WCF service from AngularJS Content-type issue
首先,对于这段时间的长度,我们深表歉意,但我想提供尽可能多的信息。 我正在编写我的第一个打字稿/角度应用程序,并尝试调用我们现有的IIS WCFservices。 呼叫是跨域的。 感谢您的任何投入。
服务合同:
[OperationContract]
[WebInvoke(Method = "POST",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "LoginUser",
BodyStyle = WebMessageBodyStyle.Wrapped)]
LoginResponse LoginUser(LoginRequest request);
TypeScript请求:
class LoginRequest implements ILoginRequest {
UserName: string;
Password: string;
ReturnListOfQueues: boolean;
}
Angular / Typescript登录方法:
loginUser(UserName: string,
Password: string,
DomainName: string,
ReturnListOfQueues: boolean): ng.IPromise<ILoginResponse> {
var base_url = 'http://[IP]/AuthenticationService.svc/rest/LoginUser';
var request = new LoginRequest();
request.UserName = UserName;
request.Password = Password;
request.ReturnListOfQueues = ReturnListOfQueues;
var req = {
method: 'POST',
url: base_url,
headers: { 'Content-Type': undefined },
data: JSON.stringify({ request: request }),
contentType: "application/json",
dataType: "json",
}
return this.$http(req)
.then((response: ng.IHttpPromiseCallbackArg<ILoginResponse>): ILoginResponse=> {
return <ILoginResponse>response.data;
});
}
当我像上面那样使用headers: { 'Content-Type': undefined }
调用它时,JSON显示在Fiddler中,但是Content-Type是`text / plan'并且出现400请求错误
我还不能发布图片,所以这里是提琴手屏幕截图的链接https://goo.gl/photos/m75uzHi3E9KdkZhw5
如果我在Fiddler中编辑/重新发出请求并将Content-Type更改为application / json,则将成功调用该服务,并且会获得预期的响应数据。
当我更改使用application / json的请求时,数据不再显示在Fiddler中
var req = {
method: 'POST',
url: base_url,
headers: { 'Content-Type': "application/json" },
data: JSON.stringify({ request: request }),
contentType: "application/json",
dataType: "json",
}
Fiddler screencap2: https : //goo.gl/photos/VeJd9HSX46svA1HZ6
设置内容类型时,我也在Firefox中收到CORS消息
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [removed]. (Reason: CORS preflight channel did not succeed).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [removed]. (Reason: CORS request failed).
web.config申请服务
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*"/>
<add name="Access-Control-Allow-Headers" value="X-Requested-With,Content-Type, Accept" />
<add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS" />
<add name="Access-Control-Max-Age" value="1728000" />
</customHeaders>
</httpProtocol>
<behavior name="restBehavior">
<webHttp helpEnabled="true" defaultOutgoingResponseFormat="Json" automaticFormatSelectionEnabled="false" />
</behavior>
更新:我关注了这篇博文blogs.microsoft.co.il/idof/2011/07/02/cross-origin-resource-sharing-cors-and-wcf/
现在,当我使用headers: { 'Content-Type': "application/json" }
发送请求时headers: { 'Content-Type': "application/json" }
,我不再收到405错误。 它发送OPTIONS请求,该请求返回200 OK,但从未发出POST请求。
可能是JSON.stringify
生成了一些无效的JSON,因此您要发布无效的JSON数据吗?
如果我尝试反序列化包含在第一张图片中的Request正文,则会出现以下错误:
解析布尔值时出错。 路径“ request.ReturnListOfQueues”,第1行,位置80。
我使用以下代码:
JsonConvert.DeserializeObject("{\"request\": {\"UserName\": \"admin\", \"Password\": \"admin\",\"ReturnListOfQueues\":false\"}}");
如果我将其更改为:
JsonConvert.DeserializeObject("{\"request\": {\"UserName\": \"admin\", \"Password\": \"admin\",\"ReturnListOfQueues\":\"false\"}}");
它工作正常。 (在false之前添加了额外的双引号。)
我在chrome中尝试了该应用,并获得了以下内容The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed
我从web.config中删除了此部分,现在可以正常工作了。 Angular在飞行前OPTIONS调用后进行后续POST
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*"/>
<add name="Access-Control-Allow-Headers" value="X-Requested-With,Content-Type, Accept" />
<add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS" />
<add name="Access-Control-Max-Age" value="1728000" />
</customHeaders>
</httpProtocol>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.