跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。
以下几种情况是造成跨域的原因:
-
- 域名相同,端口不同
- 域名相同,协议不同(即,一个是 http,一个是 https)
- 访问其他网站时,一个是域名,一个是对应的 IP地址(PS:http://www.a.com——http://192.168.1.1)
- 主域名相同,子域名不同
- 两个完全不相同的域名
简单来说,只有域名,协议,端口都相同才能通信
凡是这两种报错都属于跨域,一般来说,前端解决跨域比较复杂,所以一般后端解决跨域,因为过程相对简单。
这里以一个 Net Core 3.x WebApi 的框架的实例来解决这个问题
一、首先 WebApi 需要配置相对应的代码
首先在 core 3.x 的 Startup.cs 文件里有 ConfigureServices 方法将服务添加到容器,将跨域的配置添加即可
跨域有两种配置方法,一种是允许所有域名,一种是配置部分域名通信,配置方法略有不同参考代码如下:
1 public void ConfigureServices(IServiceCollection services) 2 { 3 #region 解决跨域 4 //“Cors”表示策略名称,可以随便起;可以添加多条策略。 5 //AllowAnyOrigin表示允许任何域;AllowAnyMethod表示允许任何方法;AllowAnyHeader表示允许任何消息头。 6 //如果是允许指定的域、方法、消息头需要使用WithOrigins、WithMethods、WithHeaders方法。 7 services.AddCors(options => 8 { 9 options.AddPolicy("Cors", builder => 10 { 11 builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader(); 12 }); 13 }); 14 15 ////允许一个或多个来源可以跨域 16 //services.AddCors(options => 17 //{ 18 // options.AddPolicy("CustomCors", policy => 19 // { 20 // // 设定允许跨域的来源,有多个可以用','隔开 21 // policy.WithOrigins("http://localhost:9000") 22 // .AllowAnyHeader() 23 // .AllowAnyMethod() 24 // .AllowCredentials(); 25 // }); 26 //}); 27 #endregion 28 29 services.AddControllers(); 30 }
在 ConfigureServices 配置后,只需要在 HTTP请求管道 中调用即可
添加一句代码即可,但是名称一定要与服务中定义的名称一致
添加时需要注意,对 UseCors
的调用必须放在 UseRouting
之后,但在 UseAuthorization
之前。
1 public void Configure(IApplicationBuilder app, IWebHostEnvironment env) 2 { 3 4 5 if (env.IsDevelopment()) 6 { 7 app.UseDeveloperExceptionPage(); 8 } 9 10 //添加日志中间件 11 app.UseLog(); 12 13 //全局捕捉异常 14 app.UseExceptionMiddleware(); 15 16 app.UseHttpsRedirection(); 17 app.UseRouting(); 18 19 //跨域 20 app.UseCors("Cors"); 21 //app.UseCors("CustomCors"); 22 23 //用户认证 24 app.UseAuthentication(); 25 app.UseAuthorization(); 26 27 // 添加Swagger有关中间件 28 app.UseSwagger(); 29 app.UseSwaggerUI(c => { c.SwaggerEndpoint("/swagger/v1/swagger.json", "API Demo v1"); }); 30 31 app.UseEndpoints(endpoints => 32 { 33 endpoints.MapControllers(); 34 }); 35 }
本站声明:
1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/293045.html