文章目录
- 前言
- 1.跨域产生的原因
- 2.解决跨域的方案
- 2.1 前端的方式
- 2.2 后端方式
- 一、ASP.NET Core中间件实现CORS
- 1.中间件代码
- 2.在管道中的使用
前言
1.跨域产生的原因
跨域请求存在的原因：由于浏览器的同源策略，即属于不同域的页面之间不能相互访问各自的页面内容。
2.解决跨域的方案
2.1 前端的方式
1.imge.src,script.src,style.href 不受同源策略的影响可以加载其他域的资源，可以用这个特性，向服务器发送数据。最常用的就是使用image.src 向服务器发送前端的错误信息。image.src 和style.href 是无法获取服务器的数据返回的，script.src 服务器端配合可以得到数据返回。
2.possMessage,window.name,document.domain 是两个窗口直接相互传递数据。
（1）possMessage 是HTML5中新增的，使用限制是 必须获得窗口的window 引用。IE8 支持，firefox，chrome,safair,opera支持
（2）window.name ，在一个页面中打开另一个页面时，window.name 是共享的，所以可以通过window.name 来传递数据，window.name的限制大小是2M，这个所有浏览器都支持,且没有什么限制。
（3） document.domain 将两个页面的document.domain 设置成相同，document.domain 只能设置成父级域名，既可以访问，使用限制：这顶级域名必须相同
2.2 后端方式
CORS 是w3c标准的方式，通过在web服务器端设置：响应头Access-Cntrol-Alow-Origin 来指定哪些域可以访问本域的数据。
ie8&9(XDomainRequest),10 ,chrom4 ，firefox3.5,safair4，opera12支持这种方式。
一、ASP.NET Core中间件实现CORS
1.中间件代码
代码语言：javascript复制using Microsoft.AspNetCore.Http;
using System.Threading.Tasks;
namespace Core.Api
{
/// <summary>
/// 跨域中间件
/// </summary>
public class CorsMiddleware
{
private readonly RequestDelegate _next;
/// <summary>
/// 管道执行到该中间件时候下一个中间件的RequestDelegate请求委托，如果有其它参数，也同样通过注入的方式获得
/// </summary>
/// <param name="next">下一个处理者</param>
public CorsMiddleware(RequestDelegate next)
{
_next = next;
}
/// <summary>
/// 自定义中间件要执行的逻辑
/// </summary>
/// <param name="context"></param>
/// <returns></returns>
public async Task Invoke(HttpContext context)
{
context.Response.Headers.Add("Access-Control-Allow-Origin", "*");
context.Response.Headers.Add("Access-Control-Allow-Headers", context.Request.Headers["Access-Control-Request-Headers"]);
context.Response.Headers.Add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
//若为OPTIONS跨域请求则直接返回,不进入后续管道
if (context.Request.Method.ToUpper() != "OPTIONS")
await _next(context);//把context传进去执行下一个中间件
}
}
}2.在管道中的使用
代码语言：javascript复制public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseMiddleware<CorsMiddleware>()//跨域
}
