在现代Web开发中，跨域资源共享（CORS）是一个常见的问题。随着单页应用程序（SPA）和纯JavaScript应用的兴起，经常需要从不同的域调用后端服务。本文将介绍如何配置Windows Communication Foundation（WCF）服务，以允许跨域访问RESTful服务。
WCF服务是一种强大的技术，用于构建服务导向的应用程序。然而，默认情况下，WCF服务不支持跨域请求。这意味着，如果尝试从与WCF服务不同的域进行调用，将遇到跨域问题。为了解决这个问题，需要启用CORS。
REST（Representational State Transfer）是一种软件架构风格，用于设计网络应用程序。它定义了客户端和服务器之间的通信方式，使得客户端可以通过HTTP协议与服务器交互。
CORS（Cross-Origin Resource Sharing）是一种安全机制，允许或限制网页从不同源请求资源。默认情况下，浏览器会阻止跨域请求，以防止潜在的安全风险。但是，通过配置CORS，可以允许或限制特定的跨域请求。
首先，需要创建一个WCF服务，该服务能够接受POST请求，并返回一些数据。以下是创建WCF服务的步骤：
在Visual Studio中创建一个新的WCF服务项目，并定义服务契约和服务操作契约。例如：
[ServiceContract]
public interface IService1
{
[OperationContract]
[WebInvoke(UriTemplate = "/TestMethod", Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, RequestFormat = WebMessageFormat.Json)]
string TestMethod(CompositeType value);
}
定义一个DTO类，用于传输数据。例如：
[DataContract]
public class CompositeType
{
bool boolValue = true;
string stringValue = "Hello ";
[DataMember]
public bool BoolValue
{
get { return boolValue; }
set { boolValue = value; }
}
[DataMember]
public string StringValue
{
get { return stringValue; }
set { stringValue = value; }
}
}
实现服务类，处理请求并返回数据。例如：
public class Service1 : IService1
{
public string TestMethod(CompositeType value)
{
return string.Format("You entered: {0}", value.StringValue);
}
}
假设服务已经部署在某个URL上（例如：www.example1.com），使用Fiddler或其他工具测试服务是否能够正常工作。
创建一个简单的HTML页面，使用JavaScript调用WCF服务。例如：
<!DOCTYPE html>
<html>
<head>
<title>WCF服务调用示例</title>
</head>
<body>
Enter something <input id="txt" type="text"/><button>Get WCF data</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
alert("clicked");
var data = $("#txt").val();
var postdata = {};
var data_obj = {
"BoolValue": "true",
"StringValue": data
};
postdata["value"] = data_obj;
var url = "https://tmdev01.tm00.com/testwcf/service1.svc/TestMethod";
$.ajax({
type: "POST",
url: url,
contentType: "application/json; charset=utf-8",
data: JSON.stringify(postdata),
dataType: "json",
success: function(data) {console.log(data);},
error: function(a,b,c) {console.log(a);}
});
});
});
</script>
</body>
</html>
为了解决跨域问题，需要在WCF服务中启用CORS。以下是启用CORS的步骤：
protected void Application_BeginRequest(object sender, EventArgs e)
{
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost");
if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
{
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, PUT, DELETE");
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
HttpContext.Current.Response.End();
}
}
这段代码将允许来自特定源（例如：http://localhost）的跨域请求。
通过以上步骤，已经成功地配置了WCF服务，使其支持CORS。现在，可以使用JavaScript从不同的域调用WCF服务。
请注意，出于安全原因，不建议将Access-Control-Allow-Origin设置为"*"，因为这将允许任何域访问WCF服务。应该只允许特定的域访问服务。