js跨域调用wcf

在Web开发中，JavaScript（JS）跨域调用Windows Communication Foundation（WCF）服务是一个常见的问题。由于浏览器的同源策略，JS默认只能与自身来源（协议、域名、端口相同）的资源进行交互，这限制了JS直接调用不同源的WCF服务。

基础概念

同源策略：浏览器的安全功能，限制了一个源的文档或脚本如何与另一个源的资源进行交互。

跨域：当协议、域名或端口至少有一个不同，就认为是跨域。

解决方案

CORS（跨源资源共享）

WCF服务可以通过配置来支持CORS，允许特定的源进行访问。在WCF服务的配置文件中，可以设置响应头来允许跨域请求。

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
            <add name="Access-Control-Allow-Headers" value="Content-Type, Accept" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

JSONP（JSON with Padding）

JSONP是一种老旧的技术，它利用<script>标签没有跨域限制的特性来实现跨域请求。但是，JSONP只支持GET请求，并且安全性较差，因此不推荐使用。

代理服务器

可以在服务器端设置一个代理，JS先请求同源的代理服务器，然后由代理服务器转发请求到WCF服务，再将结果返回给JS。这种方式需要额外的服务器和配置。

使用Web API或RESTful服务

如果可能的话，将WCF服务转换为Web API或RESTful服务，这些服务更容易配置跨域支持，并且与JS的交互更加自然。

应用场景

当你的前端应用和WCF服务部署在不同的域时。
当你需要从不同的源获取数据或执行操作时。

注意事项

在配置CORS时，最好指定允许的源而不是使用通配符*，以提高安全性。
如果使用代理服务器，要注意代理服务器的性能和安全性。
在实现跨域调用时，要注意数据格式的兼容性和错误处理。

示例代码（CORS配置）

假设你有一个WCF服务，你可以在服务的配置文件中添加CORS支持：

<behaviors>
    <serviceBehaviors>
        <behavior name="MyServiceBehavior">
            <!-- ... -->
        </behavior>
    </serviceBehaviors>
    <endpointBehaviors>
        <behavior name="webHttpBehavior">
            <webHttp />
            <enableWebScript />
        </behavior>
    </endpointBehaviors>
</behaviors>

<services>
    <service name="MyNamespace.MyService" behaviorConfiguration="MyServiceBehavior">
        <endpoint address="" binding="webHttpBinding" contract="MyNamespace.IMyService" behaviorConfiguration="webHttpBehavior" />
    </service>
</services>

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <!-- CORS headers -->
            <add name="Access-Control-Allow-Origin" value="http://example.com" />
            <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
            <add name="Access-Control-Allow-Headers" value="Content-Type, Accept" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

在这个配置中，Access-Control-Allow-Origin被设置为特定的源（例如http://example.com），这意味着只有来自这个源的请求才会被允许。你可以根据需要调整这个值。