JavaScript跨域访问

通过fetch访问后台C# Restful服务的时候,如果需要跨域,后台服务要设置支持CORS,否则会报错。

如果站点通过web服务器发布,会报如下错误:

Access to fetch at 'http://192.168.100.2:8080/Services/someAddress' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

如果是通过本地文件系统直接访问,没有把文件放到web服务器上,错误如下

Access to fetch at 'http://192.168.100.2:8080/Services/someAddress' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

可以通过两种方式设置C# Restful WCF Services支持CORS.

1.修改web.config文件

在congfiguration中增加下面的节点,在Configuration里增加Access-Control-Allow-Origin等设置。

<?xml version="1.0"?>
<configuration>  
  <system.serviceModel>         
    <behaviors>
      <endpointBehaviors>
        <behavior name="web">
          <webHttp/>
        </behavior>
      </endpointBehaviors>
    </behaviors>
    <services>
      <service name="AXServices.MobileTransfer">
        <endpoint address="" binding="webHttpBinding" contract="AXServices.MobileTransfer" behaviorConfiguration="web"/>
      </service>
    </services>
  </system.serviceModel>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*"/>
        <add name="Access-Control-Allow-Headers" value="Content-Type, Accept" />
        <add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS" />
        <add name="Access-Control-Max-Age" value="1728000" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

不过这种设置对于直接通过文件系统访问的时候不起作用,尝试将Access-Control-Allow-Origin的节点设置成null也没作用,不知道哪里还需要设置,暂时没找到设置的方法,或者这个方法不支持从本地文件发起的访问。

通过web服务器的URL访问可以正常使用。

2.增加Global.asax和Global.asax.cs文件

在Global.asax.cs增加如下代码

protected void Application_BeginRequest(object sender, EventArgs e)
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
            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();
            }
        }

这种方法无论 通过web服务器还是文件访问都可以,将两个文件放到Services目录。