As shown in your screenshot, the service is not hosted in your web application. You cannot access such a service (hosted outside of your web application) directly from the client side, because you're violating the same origin policy restriction. It's one of the underlying concepts of trust, on which web security is based on (e.g. protection aganist XSS) - you cannot send cross domain AJAX requests. This essentially states that if content from one site (e.g. https://bank.ny.com) is granted permission to access resources on the system, then any content from that site will share these permissions, while content from another site (https://nsa.ny.com) will have to be granted permissions separately (in general, the term origin is defined using the domain name, application layer protocol, and port number).
Nevertheless, you have at least 4 solutions to solve your problem:
First - talk to your service through the middle-controller layer. Going this way implies to have proxy class generated (by svcutil.exe, what you have done by adding service reference using Visual Studio). Communication with this client looks like below:
public class TtsController
{
public JsonResult RunTts(string text)
{
using(var client = new ServiceReference1.Service1Client())
{
var response = client.RunTts(text);
return Json(response);
...
The JavaScript side should then use such an URL: var serviceUrl = "/Tts/RunTts" (along with proper JSON data passing to the AJAX request, which I'll go through a bit further).
Second - talk directly to the service. If you want to communicate directly with the service, you have to host this service in your web application. The correct WCF configuration should be followed to support RESTful services:
<system.serviceModel>
<behaviors>
<endpointBehaviors>
<behavior name="webby">
<webHttp />
</behavior>
</endpointBehaviors>
<serviceBehaviors>
<behavior>
<serviceMetadata httpGetEnabled="true" />
</behavior>
</serviceBehaviors>
</behaviors>
<services>
<service name="Namespace.Service1">
<endpoint address=""
behaviorConfiguration="webby"
binding="webHttpBinding"
contract="Namespace.IService1" />
</service>
</services>
</system.serviceModel>
For a RESTful endpoint, the binding you should use is WebHttpBinding along with appropriate behavior. Alternatively there is configuration-free experience for many RESTful services - WebServiceHostFactory. Your .svc file should look like below (MSDN):
<%@ ServiceHost Language="C#" Debug="true" Service="Namespace.Service1"
CodeBehind="Service1.svc.cs"
Factory="System.ServiceModel.Activation.WebServiceHostFactory" %>
WebServiceHostFactory creates an instance of the WebServiceHost, and since the WebServiceHost will auto-configure the endpoint using WebHttpBinding and related behavior, there doesn't need to be any configuration for this endpoint in the web.config at all (of course, if you need to customize the binding, you have to use the configuration) (MSDN).
Then to access the service use appropriate full URL: http://localhost:[port]/Service1.svc/RunTts or relative one: /Service1.svc/RunTts.
Since you're using ASP.NET MVC, based on your routes definitions, the request will dispatched to some controller, where such an action doesn't exist. You have to tell MVC to ignore route to your service:
routes.IgnoreRoute("{resource}.svc/{*pathInfo}");
(BTW: If you put your .svc file under different directory within your application, modify respectively URL and route to ignore.)
Your code needs some additional fixes:
If you want to send message in JSON format, specify dataType and contentType parameters correctly:
$.ajax({
url: serviceUrl,
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
...
Do not construct your JSON strings manually, as it can lead to further parsing errors - use converters e.g.:
var data = new Object();
data.text = $('#speak').val();
var jsonString = JSON.stringify(data);
$.ajax({
...
data: jsonString,
...
Provide additional declarative information to your service:
[ServiceContract]
public interface IService1
{
[OperationContract]
[WebInvoke(Method = "POST", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped)]
string RunTts(string text);
...
Remove service reference from the project. You don't need it as there is no usage of middle-controller here.
Third - JSONP (look here and here) can be used to overcome origin policy restriction. But you can't POST using JSONP because it just doesn't work that way - it creates a <script> element to fetch data, which has to be done via GET request. JSONP solution doesn't use XmlHttpRequest object, so it is not an AJAX request in the standard way of understanding, but the content is still accessed dynamically - no difference for the end user.
$.ajax({
url: serviceUrl,
dataType: "jsonp",
contentType: "application/json; charset=utf-8",
data: data,
...
[OperationContract]
[WebGet(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped, UriTemplate="RunTts?text={text}")]
public string RunTts(string text);
RESTful WCF configuration with cross domain requests allowed:
<system.serviceModel>
<bindings>
<webHttpBinding>
<binding name="jsonp" crossDomainScriptAccessEnabled="true" />
</webHttpBinding>
</bindings>
<behaviors>
<endpointBehaviors>
<behavior name="webby">
<webHttp />
</behavior>
</endpointBehaviors>
<serviceBehaviors>
<behavior>
<serviceMetadata httpGetEnabled="true" />
</behavior>
</serviceBehaviors>
</behaviors>
<services>
<service name="Namespace.Service1">
<endpoint address=""
behaviorConfiguration="webby"
binding="webHttpBinding"
bindingConfiguration="jsonp"
contract="Namespace.IService1" />
</service>
</services>
</system.serviceModel>
Fourth - CORS. Implemented in modern browsers alternative to JSON with Padding.
