的实施 CORS核心原料药

最近参加了一个前端分离项目，后端是基于开发的。NET核心2.1。前端对接过程中，跨域问题让我有点恼火。在这里，我想和大家分享一下我的经验。

获取/发布请求

在服务器不做任何调整的情况下，前端发起AJAX请求，如：

$.ajax({type: 'get '，URL : ' http://localhost :5000 '，success : function(result){ $(' # result ')。html(结果)；}});

200 !好像很正常，好像没什么问题。但是，您会发现Response中没有任何内容，然后当您返回浏览器Console时会收到一条错误消息，指示不支持跨域访问，这很酷。

JSONP

遇到跨域问题时，很容易想到JSONP的解决方案，但仅限于GET请求。POST据说比较难，我自己也没试过，这里就不做测试了。

$.ajax({type: 'get '，URL : ' http://localhost :5000/home/jsontest '，data: {name: 'beck'}，dataType: 'jsonp '，jsonpCallback: ' jsonpCallback '，success:函数(result) {$('#result ')。html(结果。数据)；}});

所以现在问题来了。毕竟JSONP和GET请求都有自己的局限性。如果必须开机自检，该怎么办？那就选CORS吧！

克-奥二氏分级量表

CORS(跨来源资源共享)是W3C发布的标准。它的思想是使用自定义的HTTP头让浏览器与服务器进行通信，从而决定请求或响应应该成功还是失败。CORS和JSONP都可以跨来源共享资源，但是与JSONP不同，CORS可以支持除GET之外的所有类型的HTTP请求。

在介绍实现之前，我们应该先简单了解一些CORS相关的理论，否则可能会对遇到的问题有些困惑，尤其是在GET和POST模式下都明确设置了OPTIONS请求的情况下，怎么可能还有一个OPTIONS请求呢？

CORS请求分为简单请求和复杂请求：

简单的请求

同时满足以下条件的请求被归类为简单请求：

请求模式是HEAD、GET和POST中的一种。HTTP的头信息不超过接受、接受语言、内容语言、最后事件标识和内容类型字段；内容类型仅限于应用程序/表单-URL编码、多部分/表单-数据和文本/纯文本之一。一个简单的请求只需要服务器设置访问控制允许源权限请求源地址，我们可以在。核心应用编程接口项目：

public void configure services(is ervicecollection services){//Add services。支持跨域请求的AddCors()；} public void configure(I application builder应用程序，ihostingenvironment env){//设置允许的请求源。我的本地请求发起者的地址是http://localhost 336053894 app . usecors(options=options。带原点(' http://localhost 336053894 ')；}前端发起GET或POST请求：

$.ajax({type: 'post '，URL : ' http://localhost :5000/home/FromformTest '，data: {name: 'beck'}，success : function(result){ $(' # result ')。html(result . data)；}});

复杂请求

那些不满足简单请求要求的被归类为复杂请求。对于复杂的请求，在正式通信之前会添加一个OPTIONS请求，这称为“预览”请求。通过预览请求中的返回头信息可以判断当前请求是否被允许。

我们可以将contentType设置为application/json，这个请求就变成了一个复杂的请求：

$.ajax({type: 'post '，URL : ' http://localhost :5000/home/from body test '，content type : ' application/JSON '，data : JSON . stringify({ name : ' beck ' })，success : function(result){ $(' # result ')。html(result . data)；}});如果API项目中的Startup.cs在上述调整后保持不变，你会看到OPTIONS请求中的Response Headers信息没有显示允许请求的源地址Access-Control-Allow-Origin，这意味着预览失败了，会继续凉下去。

原因是在预览请求的返回头中还必须设置访问控制请求方法和访问控制请求头。App。UseCors支持设置一些头信息或者一些请求类型，具体要看使用时的实际情况。

public void configure(iapplicationbuilder app，ihostingenvironment env){//设置允许的请求源地址、标头信息和请求类型app。usecors (options=options。带原点(' http://localhost 336053894 ')。allowanyheader()。allowy method())；}

预览通过后，将启动开机自检请求：

饼干

如果请求需要携带Cookie到服务器，它需要做一些调整，如下所示：

将AllowCredentials配置添加到启动。cs:

public void Configure(IApplicationBuilder app，IHostingEnvironment env){//设置允许的请求源地址、标头信息、请求类型、cookieapp。usecors (options=options。带原点(' http://localhost 336053894 ')。allowanyheader()。allowanymethod()。allowcredentials())；}AJAX请求还需要添加withCredentials设置：

setCookie('name '，' test ')；$.ajax({type: 'post '，URL : ' http://localhost :5000/home/from body test '，content type : ' application/JSON '，data : JSON . stringify({ name : ' beck ' })，xhrfields : { with credentials : true }，success : function(result){ $(' # result ')。html(result . data)；}});CORS是通过简单修改上述代码实现的。在实际的内部网或生产环境中，可以通过Nginx或其他设置从操作和维护层面完美地支持它，而无需修改代码。

参考材料

ASP。CORS核心网

CORSSample

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。