C#.net 不用JSONP, 设置Access-Control-Allow-Origin来实现跨域访问

Biegral 2018/10/29 14:05:57 3613

一、通过IIS配置 
可以参考《跨域访问-需要设置HTTP响应标头》, 这种方法其实就是改了Web.config（即下面的第二种方法），只不过是提供一个操作的介面罢了。

二、配置Web.config文件  （推荐）
1、允许 "所有网站" 跨域访问写法：
<configuration>  
  <system.webServer>  
    <httpProtocol>   
    <customHeaders>   
      <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>   
      <add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>   
      <add name="Access-Control-Allow-Origin" value="*" />   
    </customHeaders>   
    </httpProtocol>   
  </system.webServer>  
</configuration>
2、只允许 "1个网站" 跨域访问
可以将 <add name="Access-Control-Allow-Origin" value="*" /> 改成如下写法：
<add name="Access-Control-Allow-Origin" value="http://domain1.com" />
注意：value值只能是一个域名，如果是一个具页面，例如：http://domain1.com/index.html 是无效的。

3、允许 "多个网站" 跨域访问
网上说可以用逗号（，）将网站分开，即：
<add name="Access-Control-Allow-Origin" value="http://domain1.com, http://domain2.com" /> 
但经测试失败。
网上《在 Web.config 中，配置允许多个指定的域名进行跨域访问》说可以利用“ URL Rewrite 组件”来实现（未测式）
  • 可以从微软官方下载 URL Rewrite（支持 IIS 7 以及之后的版本）
  • 可以在 IIS 中使用 Web 平台安装器 进行安装
    该组件安装好后（重启服务器），在 Web.config 中定位到 <system.webServer>，不用再添加 <httpProtocol> 中的跨域配置了，取而代之的是添加 <rewrite> 的配置，如下所示：
<system.webServer>
    <!-- 其它配置 -->

    <rewrite>
        <outboundRules>
            <rule name="AddCrossDomain">
                <match serverVariable="RESPONSE_Access_Control_Allow_Origin" pattern=".*" />
                <conditions logicalGrouping="MatchAll" trackAllCaptures="true">
                    <add input="{HTTP_ORIGIN}" pattern="(http(s)?://((.+\.)?domain1\.com|(.+\.)?domain2\.com|(.+\.)?domain3\.com))" />
                </conditions>
                <action type="Rewrite" value="{C:0}" />
            </rule>
        </outboundRules>
    </rewrite>

</system.webServer>

至此，允许多个指定域名的跨域访问就配置完了。

三、在webservice 的方法上改响应头信息
  • 后端
[WebMethod]
public void SayHi()
{
   //支持跨域, 改写响应头信息
   HttpContext.Current.Response.Headers.Add("Access-Control-Allow-Origin", "*");
   HttpContext.Current.Response.Headers.Add("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, OPTIONS, TRACE, HEAD, PATCH");
   HttpContext.Current.Response.Headers.Add("Access-Control-Allow-Headers", "x-requested-with,content-type");
   // 注意：如果前端dataType为"json"，必须先转换再返回（否则回调前端的error而不是success）
   HttpContext.Current.Response.Write(JsonConvert.SerializeObject("Say Hi!"));
   HttpContext.Current.Response.End();
}
  • 前端调用方法
    $.ajax({
   type: "get",                    // 只能用get方法, post一直试未成功
   url: "http://127.0.0.1/myservice/MyService.asmx/SayHi",
   dataType: "json",
   success: function (result, status) {
      alert(result);
   },
   complete: function (XMLHttpRequest, textStatus) {
       var returnText = XMLHttpRequest.responseText;                    
   },
   error: function (err) {
      alert("跨域访问失败！");
   },
});
    web.config 为支持get方法访问要加以下代码
          <!-- 支持用GET、POST方法访问 WebService -->
      <webServices>
        <protocols>
          <add name="HttpGet"/>
          <add name="HttpPost"/>
        </protocols>
      </webServices>
      <!-- 支持用GET方法访问 WebService -->
    注意点：
    1.前端用get方式访问
    2.后端返回的数据格式要与前端datatype一致
    3.后端用无返回函数(void)
    4.改web.config支持用get方法访问 
四、想了解更多的方式    可参考《Access-Control-Allow-Origin 如何设置多个值呢》介绍了a、b、c、d四种方法

参考资料：

1、C#.net 设置Access-Control-Allow-Origin来实现跨域
2、jquery ajax跨域请求webservice webconfig配置
3、ajax 设置Access-Control-Allow-Origin实现跨域访问

本文转载:CSDN博客

阅读排行

分类

归档