I have created an application using HTML + AngularJS + WCF(REST). There is a feature to upload the files to the server. I have used ngFileUpload directive for the same. It’s working fine in Internet Explorer(ver 10) even for files around 5MB. However, it fails to upload the files in firefox and chrome. The error reported is 405(Method not found).
I have created a sample application in order to isolate the issue. This application used JQuery POST method to send files to the server. It also fails in firefox and chrome and works in IE. Getting below errors.
Firefox:
“405 Method Not Allowed”
Chrome:
XMLHttpRequest cannot load http://localhost:54978/FileService.svc/Upload/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:56004' is therefore not allowed access. The response had HTTP status code 405.
Looking at the above error description tried below things with no luck
- Setting the header Access-Control-Allow-Origin
- Setting the header Content-Type
- Setting the header Content-Length
- Changing the method from POST to GET
- Turning off CORS in the Chrome using CORS plugin.
- Added Handler mapping for *wsdl as mentioned in http://stackoverflow.com/questions/7434204/405-method-not-allowed-only-in-firefox-6-but-not-in-ie-9-when-calling-wcf-serv
- WCF HTTP Activation and Non-Http Activation http://stackoverflow.com/questions/11116134/wcf-on-iis8-svc-handler-mapping-doesnt-work
-
Tried solutions in the below link
http://forums.iis.net/t/1160649.aspx
https://blog.nraboy.com/2014/08/bypass-cors-errors-testing-apis-locally/
Both client and server are on the same and in the dev environment.
WCF REST Service:
[ServiceContract]
public interface IFileService
{
[OperationContract]
[WebInvoke(Method = "POST",
UriTemplate = "Upload/",
BodyStyle = WebMessageBodyStyle.Bare,
ResponseFormat = WebMessageFormat.Json,
RequestFormat = WebMessageFormat.Json)]
void Upload(Stream stream);
}
[ServiceBehavior]
public class FileService : IFileService
{
public void Upload(Stream stream)
{
string filePath = Path.Combine(Path.GetTempPath(), Guid.NewGuid().ToString() + ".jpg");
using (var fileStream = File.Create(filePath))
{
stream.CopyTo(fileStream);
}
}
}
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Uploading using WCF REST API</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function upload(file) {
var request = new XMLHttpRequest();
request.open('POST', 'http://localhost:54978/FileService.svc/Upload/');
request.setRequestHeader('Access-Control-Allow-Origin', '*');
//request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//request.setRequestHeader("Content-length", file.length);
request.send(file);
}
</script>
</head>
<body>
<input id="filePicker" type="file"/>
<button onclick="upload(filePicker.files[0])">
<span>Upload</span>
</button>
</body>
</html>
Appreciate any solution/workaround for the issue.
Submit an article or tip