【AJAX】Ajax 跨域请求解决方案 - Using CORS

前端之家收集整理的这篇文章主要介绍了【AJAX】Ajax 跨域请求解决方案 - Using CORS前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

什么是跨域请求?

这一点不用我说了吧,想必看这篇文章的您正深刻体会着,心情估计是这样的,接下来估计是这样的,看完这篇文章预祝您是这样的(请原谅我的调皮)。


CORS(Cross Origin Resource Sharing)是如何工作的?

CORS 是通过向跨域请求的 Rquest、Response 添加HTTP Header来实现的 -- 客户端需要标明来源( Origin),服务端反馈是否接受这个来源( Access-Control-Allow-Origin)。但是有个大前提是,服务端必须支持CORS!

简单请求

对于简单的跨域请求(即 GETs,POSTs,而且没有设置头部,请求体也是 plain text 或者 form data),浏览器就会给头部加上额外加上Origin 来标明来源, 如下就是一个简单的跨域请求(我在http://jquery.com/ 站点的console 下执行的):
$.ajax({
	url : 'http://localhost/corstest/index',success:function (data) { console.log(data)	}
});
Request Header:
Origin:http://jquery.com

Error:
XMLHttpRequest cannot load http://localhost/corstest/index. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://jquery.com' is therefore not allowed access.
原因是服务器的Response没有返回 'Access-Control-Allow-Origin'头部来表明这个请求是被允许的

下面我们来修改下服务器端的代码,如下设置 'Access-Control-Allow-Origin'头部以允许'http://jquery.com' 访问(可设成"*"允许任何请求)
public class IndexController : Controller
{
    public string Index()
    {
        Response.AddHeader("Access-Control-Allow-Origin","http://jquery.com");
        return "Hello World";
    }
}
从新请求,一切OK!
Response Header:
Access-Control-Allow-Origin:http://jquery.com

预飞请求(Preflighted Requests)

当有下列情况的时候,浏览器会发送预飞请求
  1. 使用除GET、POST 、HEAD外的 HTTP Method
  2. 自定义头部
  3. Content-Type使用除 text/plain,application/x-www-form-urlencoded,或者 multipart/form-data外的类型,比如 application/json
例如执行如下请求(仍然是在http://jquery.com/ 站点的console 下执行):
$.ajax({
	url : 'http://localhost/corstest/index',headers: {'From':'elvin'},//这里自定义了一个 From header	 
	success:function (data) { console.log(data)	}
});
Request Header:
Request URL:http://localhost/corstest/index
Request Method:OPTIONS
...
Access-Control-Request-Headers:accept,from
Access-Control-Request-Method:GET
Origin:http://jquery.com

Error:
XMLHttpRequest cannot load http://localhost/corstest/index. Request header field From is not allowed by Access-Control-Allow-Headers.

需要注意的是 Request Method 是 OPTIONS,就是那个“预飞”, 这个请求是浏览器自动发出的!
报错的意思是说,服务端没有返回 Access-Control-Allow-Header来标明这个自定义header 是允许的。

下面我们调整下我们的服务端代码
public class IndexController : Controller
{
    public string Index()
    {
        Response.AddHeader("Access-Control-Allow-Origin","*"); 

        if (Request.HttpMethod == "OPTIONS")
        {
            Response.AddHeader("Access-Control-Allow-Headers","From"); 
            Response.End();
        }

        return "Hello World";
    }
}
然后再次请求,一切OK!
Response Header:

Access-Control-Allow-Headers:From
Access-Control-Allow-Origin:*


相关阅读:

猜你在找的Ajax相关文章