概念理解

CORS：跨域资源共享

简单请求

CORS详解 - 图1

非简单请求

CORS详解 - 图2

一图说明

image.png

手动尝试

客户端

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title></title>
  7. </head>
  8. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  10. <body>
  11.     <h1>这是标题</h1>
  12.     <button onclick="SendCors1()">SendCORS !! </button>
  13.     <script>
  15.         function SendCors1() {
  16.             $.ajax({
  17.                 url: 'https://localhost:7178/home/',
  18.                 method: 'GET',
  19.                 headers:{
  20.                     'aa':'3232' //自定义的header表示为非简单请求
  21.                 },
  22.                 success: (res) => {
  23.                     console.warn('success', res);
  24.                     alert(res.content);
  25.                 }
  26.             });
  27.         }
  28.     </script>
  29. </body>
  31. </html>


服务端

  1. var builder = WebApplication.CreateBuilder(args);
  3. // Add services to the container.
  5. builder.Services.AddControllers();
  6. // Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
  7. builder.Services.AddEndpointsApiExplorer();
  8. builder.Services.AddSwaggerGen();
  10. //步骤一
  11. //CORS配置
  12. string pname = "testpolicy";
  13. builder.Services.AddCors(options =>
  14. {
  15.     options.AddPolicy(name: pname,
  16.                     policy =>
  17.                     {
  18.                         policy.AllowAnyHeader().AllowAnyOrigin();
  19.                     });
  20. });
  23. var app = builder.Build();
  25. //...
  27. //步骤二
  28. //使用跨域资源共享
  29. app.UseCors(pname);
  31. app.MapControllers();
  33. app.Run();


http请求示例

image.png

参考

阮一峰-跨域资源共享 CORS 详解 MDN-跨源资源共享（CORS） fetch 在 ASP.NET Core 中启用跨源请求 (CORS) Getting started with the IIS CORS Module