一、让.net core api 支持跨域访问
①修改 Startup.cs 文件:
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
namespace KLKY_API
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
//2021-3-10 09:58:41 添加以下代码:
//定义配置跨域处理,见: https://www.cnblogs.com/tianma3798/p/14254758.html
services.AddCors(options =>
{
//完全公开,不支持cookie传递
options.AddPolicy("any", policy =>
{
policy.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader();
});
//指定域名公开,可以支持cookie
options.AddPolicy("all", policy =>
{
policy.WithOrigins(
"null", //file:///本地测试可以访问
"http://localhost:7294",
"http://localhost:8081"
)
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials();
});
});
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseMvc(routes =>
{
routes.MapRoute(
name: "area",
template: "{area:exists}/{controller=Home}/{action=Index}/{id?}");
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseMvc();
app.UseCors();//开启 跨域处理 2021-3-10 10:03:54
}
}
}
②控制器Controller 添加属性 [EnableCors("any")] (或[EnableCors("all")],详细见上文Startup.cs 文件的ConfigureServices函数里的 AddCors,需要哪一种就指定哪一种...):
using KLKY_API.Common.ApiResult;
using KLKY_BLL.User;
using Microsoft.AspNetCore.Cors;
using Microsoft.AspNetCore.Mvc;
using System.Data;
using static KLKY_API.Common.ApiResult.ApiBaseResultEnum;
namespace KLKY_API.Areas.User.Controllers
{
[EnableCors("any")]//指定跨域公开
[ApiController]//说明本Controller是Api的Controller
[Area("User")]//说明本Controller的区域名称叫User
[Route("API/[area]/[controller]/[action]")]//说明本Controller的访问url是:api/区域名称/控制器名称/函数名称
public class LoginController : BaseApiController
{
#region 用户登录
[HttpPost]
//https://localhost:44302/api/User/Login/UserLogin2
public ApiBaseResult UserLoginPost([FromForm] NamePassword namePwd)
{
if (namePwd == null)
{
return ReturnApiDefaultResult(false, ((int)ErrorCode.Arguments).ToString(), ErrorCode.Arguments.GetRemark(), null);
}
else
{
DataTable dt = LoginBLL.UserLogin(namePwd.Name, namePwd.Password);
if (dt != null && dt.Rows.Count > 0)
{
return ReturnApiBaseResult(dt);//返回登录用户数据
}
else
{
return ReturnApiNullResult();//无数据
}
}
}
public class NamePassword
{
public string Name { get; set; }
public string Password { get; set; }
}
#endregion
}
}
注:修改了 Startup.cs 文件,并且Controller控制器开启[EnableCors("any")] 跨域公开之后,就不用Jsonp来跨域访问了,ajax跨域调用的写法就和本地调用一样了....
二、POST跨域AJAX调用,传参数不为NULL
<html>
<head>
<title>登录</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
账号:<input type="text" id="txtName" value="admin" /><br />
密码:<input type="text" id="txtPwd" value="admin" /><br />
<input type="button" id="btnSubmit" value="登录" />
<script>
$(function () {
$("#btnSubmit").click(function () {
var name = $("#txtName").val();
var pwd = $("#txtPwd").val();
var param = { "Name": name, "Password": pwd };
$.ajax({
type: "POST",
url: "https://localhost:44302/api/User/Login/UserLoginPost",
data: param,
dataType: "json",
//contentType: "application/json",
success: function (req) {
if (req.result == "Success") {
alert("登录成功!");
}
else {
alert(req.messages + "[" + req.errors + "]");
}
}
});
});
});
</script>
</body>
</html>
DEMO页面地址是:http://localhost:7294/login.html
API接口地址是:https://localhost:44302/api/User/Login/UserLoginPost
端口号完全不一样,是典型的跨域调用AJAX...
POST的传递的参数名称,必须和API那头的参数类的属性名称要一样。并且API那边参数 要添加 [FromForm] (注意,不是[FromBody] !),就能获取到POST过来的参数了!
三、POST跨域AJAX调用API接口效果如下:
四、GET方式(Cors)跨域调用API
①Demo页面 (http://localhost:2551/login_post.html)
<html>
<head>
<title>登录Get</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
账号:<input type="text" id="txtName" value="admin" /><br />
密码:<input type="text" id="txtPwd" value="admin" /><br />
<input type="button" id="btnSubmit" value="登录" />
<script>
$(function () {
$("#btnSubmit").click(function () {
var name = $("#txtName").val();
var pwd = $("#txtPwd").val();
$.ajax({
type: "GET",
url: "https://localhost:44302/api/User/Login/UserLoginGet",
data: { Name: name, Password: pwd },
success: function (req) {
if (req.result == "Success") {
alert("登录成功!");
}
else {
alert(req.messages + "[" + req.errors + "]");
}
}
});
});
});
</script>
</body>
</html>
②API的Controller (https://localhost:44302/api/User/Login/UserLoginPost)
using KLKY_API.Common.ApiResult;
using KLKY_BLL.User;
using Microsoft.AspNetCore.Cors;
using Microsoft.AspNetCore.Mvc;
using System.Data;
using static KLKY_API.Common.ApiResult.ApiBaseResultEnum;
namespace KLKY_API.Areas.User.Controllers
{
[EnableCors("any")]//指定跨域公开
[ApiController]//说明本Controller是Api的Controller
[Area("User")]//说明本Controller的区域名称叫User
[Route("API/[area]/[controller]/[action]")]//说明本Controller的访问url是:api/区域名称/控制器名称/函数名称
public class LoginController : BaseApiController
{
[HttpGet]
//https://localhost:44302/api/User/Login/UserLoginGet?Name=admin&Password=admin
public ApiBaseResult UserLoginGet(string Name, string Password)
{
if (string.IsNullOrWhiteSpace(Name) || string.IsNullOrWhiteSpace(Password))
{
return ReturnApiDefaultResult(false, ((int)ErrorCode.Arguments).ToString(), ErrorCode.Arguments.GetRemark(), null);
}
else
{
DataTable dt = LoginBLL.UserLogin(Name, Password);
if (dt != null && dt.Rows.Count > 0)
{
return ReturnApiBaseResult(dt);//返回登录用户数据
}
else
{
return ReturnApiNullResult();//无数据
}
}
}
}
}
③返回值