首先,很抱歉这篇文章太长,但我想包含尽可能多的信息。我正在编写我的第一个 typescript /Angular 应用程序并尝试调用我们现有的 IIS WCF 服务。调用是跨域的。感谢您的任何意见。
服务契约(Contract):
[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请求错误
我还不能发布图片,所以这里是 fiddler screencap 的链接 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 屏幕截图2: https://goo.gl/photos/VeJd9HSX46svA1HZ6
设置 Content-Type 时,我还会在 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"}
发送请求时,我不再收到 405 错误。它发送 OPTIONS 请求,该请求返回 200 OK,但从未发出 POST 请求。
最佳答案
是否是 JSON.stringify
生成了一些无效的 JSON,因此您发布了无效的 JSON 数据?
如果我尝试反序列化第一张图片中包含的请求正文,我会收到以下错误:
Error parsing boolean value. Path 'request.ReturnListOfQueues', line 1, position 80.
我使用了以下代码:
JsonConvert.DeserializeObject("{\"request\": {\"UserName\": \"admin\", \"Password\": \"admin\",\"ReturnListOfQueues\":false\"}}");
如果我将其更改为:
JsonConvert.DeserializeObject("{\"request\": {\"UserName\": \"admin\", \"Password\": \"admin\",\"ReturnListOfQueues\":\"false\"}}");
效果很好。 (在 false 之前添加了额外的双引号。)
关于javascript - 从 AngularJS 发布到 WCF 服务内容类型问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30762350/