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

最新推荐文章于 2024-04-07 22:17:48 发布

q573625392

最新推荐文章于 2024-04-07 22:17:48 发布

阅读量1k

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/bearfighter/article/details/42642799

版权

Javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

什么是跨域请求？

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

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）

当有下列情况的时候，浏览器会发送预飞请求

使用除GET、POST 、HEAD外的 HTTP Method
有自定义头部
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:*