Apologies for the lengthy content, but I wanted to provide as much detail as possible. I am currently working on my first TypeScript/Angular application and trying to connect to our existing IIS WCF services which are cross-domain. Any input would be greatly appreciated.
Service Contract:
[OperationContract]
[WebInvoke(Method = "POST",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "LoginUser",
BodyStyle = WebMessageBodyStyle.Wrapped)]
LoginResponse LoginUser(LoginRequest request);
TypeScript Request:
class LoginRequest implements ILoginRequest {
UserName: string;
Password: string;
ReturnListOfQueues: boolean;
}
Angular/TypeScript Login Method:
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;
});
}
When attempting the above with
headers: { 'Content-Type': undefined }I am unable to upload images at the moment, so here is a link to a screenshot of Fiddler:
If I manually change the Content-Type to application/json in Fiddler, the service call is successful and the expected response data is received.
However, once the request is updated to use application/json, the data no longer shows up in Fiddler.
var req = {
method: 'POST',
url: base_url,
headers: { 'Content-Type': "application/json" },
data: JSON.stringify({ request: request }),
contentType: "application/json",
dataType: "json",
}
Fiddler screenshot2:
CORS messages also appear in Firefox when setting the Content-Type attribute.
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 entries for the service
<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>
UPDATE: I followed the instructions in this post blogs.microsoft.co.il/idof/2011/07/02/cross-origin-resource-sharing-cors-and-wcf/
Now, when sending the request with
headers: { 'Content-Type': "application/json" }