重新整理 .net core 实践篇————跨域问题四十一]

前言

简单整理一下.net core 的跨域问题,这个以前也整理过比较详细的,故而在此简单整理一下。

正文

对跨域相对的就是同源,什么是同源呢?

  1. 协议相同(http/https)

  2. 主机(域名)相同

  3. 端口相同

如果全部满足这个三个条件就是同源,否者就是跨域。

跨域请求大概是下面这个过程:

从上面中看到,这些行为都是浏览器自己发起的检验,而不是我们的用户的行为。

那么就有两点东西就值得关注了。

  1. 假如a.com和b.com都是我的网站,现在我希望a.com访问b.com的东西。

这时候出现了浏览器出现报错,那么怎么办呢?b网站是否应该做什么呢?

  1. 安全问题,我就只希望a.com去访问b.com,其他网站不允许。

上文图片中显示了,浏览器会发送一个options请求判断是否允许请求,那么这个请求是什么呢?或者它包含什么呢?

首先这个请求是options,然后其头部包括。

  1. origin 请求源

  2. Access-Control-Request-Method 浏览器请求的方法,比如说post,get

  3. Access-Control-Request-Headers 是指我们请求发起的请求头

那么我们的服务器需要响应:

  1. Access-Control-Allow-Origin 是否允许跨域

  2. Access-Control-Allow-Credentials 是否允许携带我们的认证信息,比如cookie信息

  3. Access-Control-Expose-Headers 允许跨域请求的脚本访问到响应头的信息

  4. Access-Control-Max-Age 有效跨域的时间,如果时间过了浏览器还有再次过来请求是否可以通过请求

  5. Access-Control-Allow-Methods 允许的http方法

  6. Access-Control-Allow-Headers 允许的http头

也就是说浏览器需要告诉服务器我们请求的信息是怎么样的,需要哪个域名来访问、请求的方法是什么,需要访问的请求的头部信息是什么。

现在假设我们拿到这些信息了,查看origin通过,看下请求Access-Control-Request-Method是post也通过,然后查看一下Access-Control-Request-Headers,比如这个值是X-Custom-token。

那么如果我们允许用户请求的header里面有X-Custom-token的话,那么在回复里面Access-Control-Allow-Methods就应该是:Access-Control-Allow-Methods:X-Custom-token。

Access-Control-Request-Headers 上面还是有点绕哈:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Request-Headers 直接看这个。

如上上述满足origin 和 Access-Control-Request-Method 的话,那么我在响应包的头部加入Access-Control-Allow-Origin:true,否则就是在Access-Control-Allow-Origin:false。

这里说明一下,如果options 请求Access-Control-Request-Headers里面的值,我们不同意的话,同样可以返回Access-Control-Allow-Origin 为true, Access-Control-Allow-Headers可以不返回,但是在请求的时候会出现用户自定义的header不会传输到我们的后台。

故而,如果Access-Control-Request-Headers 不满足的时候,个人认为设置可以Access-Control-Allow-Origin为true,这样表示是允许跨域的,但是自定义的一些header没有意义故而不传输。

同时Access-Control-Allow-Credentials:true,告诉浏览器请求的时候可以携带我们的认证信息,这个认证信息一般是Cookie。

Access-Control-Expose-Headers 这个是什么意思呢? 比如说a.com访问b.com,响应的头部有一个Good:aaa,也就是自定义头部。

那么我们就需要在Access-Control-Expose-Headers写Good这个头部信息(Access-Control-Expose-Headers:Good)运行对a.com的js访问到,否则js无法访问到自定义头部的。

Access-Control-Max-Age 就是跨域检测的有效期,就是过了这段时间还是要询问是否可以请求,因为到时候可能就变卦了。

这个还是很重要的。

Access-Control-Allow-Methods 和 Access-Control-Allow-Headers就是告诉浏览器,服务器对这个origin 允许的方法和头部,如果符合下次就不要再来问一次了。

这些属性都可以去查https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers。

下面介绍如何设置跨域请求:

配置服务:

services.AddCors(options =>
{
	options.AddPolicy("api", builder =>
	{
		builder.WithOrigins("https://localhost:5000").AllowAnyHeader().AllowCredentials().WithExposedHeaders();
	});
});

加入中间件:

app.UseCors();

具体的请求加入属性头:

[EnableCors("api")]
[HttpPost]
public IActionResult Pay()
{
	return Content(User.FindFirst("name").Value+"买买买");
}

这里用postman测试一下检测部分的请求。

下一节

.net core 的缓存问题。

posted @ 2021-07-11 21:40  敖毛毛  阅读(567)  评论(0编辑  收藏  举报