如您的屏幕截图所示,该服务未托管在您的 Web 应用程序中。您不能直接从客户端访问此类服务(托管在您的 Web 应用程序之外),因为您违反了同源策略限制。它是信任的基本概念之一,Web 安全基于它(例如保护 aganist XSS)——您不能发送跨域 AJAX 请求。这实质上表明,如果来自一个站点(例如https://bank.ny.com
)的内容被授予访问系统上资源的权限,那么来自该站点的任何内容都将共享这些权限,而来自另一个站点(https://nsa.ny.com
)的内容将必须单独授予权限(通常, 术语起源使用域名、应用层协议和端口号定义)。
尽管如此,您至少有 4 个解决方案来解决您的问题:
首先- 通过中间控制器层与您的服务对话。采用这种方式意味着生成代理类(通过svcutil.exe,您通过使用 Visual Studio 添加服务引用来完成)。与该客户端的通信如下所示:
public class TtsController
{
public JsonResult RunTts(string text)
{
using(var client = new ServiceReference1.Service1Client())
{
var response = client.RunTts(text);
return Json(response);
...
JavaScript 端应该使用这样的 URL:(var serviceUrl = "/Tts/RunTts"
连同正确的 JSON 数据传递给 AJAX 请求,我将进一步介绍)。
第二- 直接与服务交谈。如果您想直接与该服务通信,则必须在您的 Web 应用程序中托管该服务。应遵循正确的 WCF 配置以支持 RESTful 服务:
<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>
对于 RESTful 端点,您应该使用的绑定WebHttpBinding
以及适当的行为。或者,有许多 RESTful 服务的免配置体验 - WebServiceHostFactory
. 您的 .svc 文件应如下所示 ( MSDN ):
<%@ ServiceHost Language="C#" Debug="true" Service="Namespace.Service1"
CodeBehind="Service1.svc.cs"
Factory="System.ServiceModel.Activation.WebServiceHostFactory" %>
WebServiceHostFactory
创建 的实例WebServiceHost
,并且由于WebServiceHost
将使用WebHttpBinding
和相关行为自动配置端点,因此 web.config 中根本不需要对此端点进行任何配置(当然,如果您需要自定义绑定,你必须使用配置)(MSDN)。
然后使用适当的完整 URL:http://localhost:[port]/Service1.svc/RunTts
或相对URL: 访问服务/Service1.svc/RunTts
。
由于您使用的是 ASP.NET MVC,因此根据您的路由定义,请求将分派到不存在此类操作的某个控制器。您必须告诉 MVC 忽略到您的服务的路由:
routes.IgnoreRoute("{resource}.svc/{*pathInfo}");
(顺便说一句:如果您将 .svc 文件放在应用程序中的不同目录下,请分别修改 URL 和路由以忽略。)
您的代码需要一些额外的修复:
如果要发送 JSON 格式的消息,请正确指定dataType
和contentType
参数:
$.ajax({
url: serviceUrl,
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
...
不要手动构建 JSON 字符串,因为它可能导致进一步的解析错误 - 使用转换器,例如:
var data = new Object();
data.text = $('#speak').val();
var jsonString = JSON.stringify(data);
$.ajax({
...
data: jsonString,
...
为您的服务提供额外的声明性信息:
[ServiceContract]
public interface IService1
{
[OperationContract]
[WebInvoke(Method = "POST", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped)]
string RunTts(string text);
...
从项目中删除服务引用。您不需要它,因为这里没有使用中间控制器。
第三- JSONP(看这里和这里)可用于克服原产地政策限制。但是您不能使用 JSONP POST,因为它不能那样工作- 它创建一个<script>
元素来获取数据,这必须通过 GET 请求来完成。JSONP 解决方案不使用XmlHttpRequest
对象,因此它不是标准理解方式的 AJAX 请求,但内容仍然是动态访问的——对于最终用户来说没有区别。
$.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 配置:
<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>
第四- CORS。在现代浏览器中实现,替代带有 Padding 的 JSON。