导航

Http跨域

Posted on 2017-08-30 09:10  清浅ヾ  阅读(873)  评论(0)  编辑  收藏  举报

一、传统

ajax跨域访问是一个老问题了，解决方法很多，比较常用的是JSONP方法，JSONP方法是一种非官方方法，而且这种方法只支持GET方式，不如POST方式安全。 即使使用jQuery的jsonp方法，type设为POST，也会自动变为GET。

官方问题说明：

"script": Evaluates the response as JavaScript and returns it as plain text. Disables caching by appending a query string parameter, "_=[TIMESTAMP]", to the URL unless the cache option is set to true.Note: This will turn POSTs into GETs for remote-domain requests.

如果跨域使用POST方式，可以使用创建一个隐藏的iframe来实现，与ajax上传图片原理一样，但这样会比较麻烦。

二、当跨域访问时，浏览器会发请求吗

没有设置跨越，浏览器会返回

XMLHttpRequest cannot load http://google.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.jsbin.io' is therefore not allowed access.

在开发工具中Network并没有任何记录。但实际请求仍会被发送，只是在浏览器做了拦截。 参考:Access-Control-Allow-Origin与跨域

三、Access-Control-Allow-Origin来实现跨域访问

随着跨域请求的应用越来越多，W3C提供了跨域请求的标准方案（Cross-Origin Resource Sharing）。IE8、Firefox 3.5 及其以后的版本、Chrome浏览器、Safari 4 等已经实现了 Cross-Origin Resource Sharing 规范，实现了跨域请求。所有和CORS相关的response header都是以“Access-Control-“为前缀的：

  • Access-Control-Allow-Origin（必须） 这个必须包含在所有合法的跨域请求的response中，其值要么是Origin header中的值，要么就是”*“允许任何域的请求。
  • Access-Control-Allow-Credentials(可选)，默认情况下cookie是不包含在CORS请求中的，使用这个header将会指明要在CORS请求中包含cookie，它的有效值是true, 如果不需要cookie, 正确的做法不是将其值设为false, 而是根本就不要这个包含header.
  • Access-Control-Expose-Header(可选)，XMLHttpRequest 2 object中有一个getResponseHeader()方法，用以返回特定的response header，但是它只能得到简单的响应header,如果想让客户端访问到其他的一些header, 必须设定这个 Access-Control-Expose-Header，它的值是以逗号分隔的你想暴漏给客户端的header。

在服务器响应客户端的时候，带上Access-Control-Allow-Origin头信息。

参考:

四、Asp.Net封装Access-Control-Allow-Origin头信息

1.Web.config

在Web.config中加入统一的Access-Control-Allow-Origin返回头信息，是最原始，也是最直接的。无论是在老版本WebForm还是Mvc都适用。

CORS on IIS7 For Microsoft IIS7, merge this into the web.config file at the root of your application or site:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>  
        <httpProtocol>  
            <customHeaders>  
                <add name="Access-Control-Allow-Origin" value="*" />  
            </customHeaders>  
        </httpProtocol>  
    </system.webServer>  
</configuration>

2.自定义Attribute，来增加头信息

a)创建一个attribute

public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
        base.OnActionExecuting(filterContext);
    }
}

b)应用到Controller中的Action

[AllowCrossSiteJson]
public ActionResult YourMethod()
{
    return Json("data");
}

参考:ASP.NET MVC 设置Access-Control-Allow-Origin

3.Microsoft.AspNet.Cors

使用Microsoft.AspNet.Cors包，这个是微软封装好的一个类库，原理和之前是一样的，有兴趣的话可以详细参考如下的文章配置:

 在WebApiConfig中直接配置，第一种和第二种：

 需要引用：using System.Web.Http.Cors;

 1     public static class WebApiConfig
 2     {
 3         public static void Register(HttpConfiguration config)
 4         {
 5             // Web API 配置和服务
 6             //跨域配置
 7             //第一种：
 8             //config.EnableCors(new EnableCorsAttribute("*", "*", "*"));//全部不限制
 9 
10             //第二种：配置特性
11             //EnableCorsAttribute attribute = new EnableCorsAttribute("http://localhost:9008/", "*", "*");
12             //attribute.Origins.Add("http://localhost:9009/");
13             //config.EnableCors(attribute);
14 
15             // Web API 路由
16             config.MapHttpAttributeRoutes();
17 
18             config.Routes.MapHttpRoute(
19                 name: "DefaultApi",
20                 routeTemplate: "api/{controller}/{id}",
21                 defaults: new { id = RouteParameter.Optional }
22             );
23 
24             config.Routes.MapHttpRoute(
25                name: "MyApi",
26                routeTemplate: "api/{controller}/{action}/{id}",
27                defaults: new { id = RouteParameter.Optional }
28            );
29         }
30     }


第三种：在WebApi的方法中增加特性

 1     //Api认证特性
 2     [BasicAuthorize]
 3     public class MyApiController : ApiController
 4     {
 5         [HttpGet]
 6         [AllowAnonymous] //不需要登录认证，允许访问
 7 
 8         //第三种，在这里增加跨域特性，可跨域访问此方法
 9         [EnableCors(origins: "http://localhost:9008/", headers:"*",methods: "GET,POST,PUT,DELETE")]
10         public string Get(int str)
11         {
12             return "你好"+str;
13         }
14     }


在ajax跨域访问时：

       //浏览器ajax请求跨域问题，只存在前端跨域请求设置，后端请求不存在
        jQuery.support.cors = true;   //设置支持跨域请求
        var location = "http://localhost:9008";
        $("#cors").on("click", function () {
            $.ajax({
                url: location + "/api/MyApi/Get",
                type: "get",
                data: { "str": 456 },
                dataType: "text",
                success: function (text) {
                    alert(text);
                },
                error: function (xhr) {
                    alert(xhr.responseText.Result);
                }
            });
        });