问题描述
最近试着用vue+axios来搭建前端，实现前后端分离，后端采用asp.net coe mvc 架构，在前端axios调用后端接口时，出现了跨域请求的错误问题，经过一番查找，最终成功实现了跨域请求，迈出了前后端分离的第一步。跨域问题浏览器报错的日志如下：
Error: Network Error
at createError (createError.js?2d83:16)
at XMLHttpRequest.handleError (xhr.js?b50d:84)
刚开始在后端加入了断点，前端运行后，是可以走到后端接口中的断点里，前端的参数也可以传到后端中，所以我总觉得不是后端的问题，但是后来试了很多方法后，还是同样的报错信息，我尝试着在后端中加入解决跨域请求的配置后，问题就没有了，前端成功调用后端接口，实现了跨域请求。
因此记录一下在asp.net core3.0中如何实现跨域请求的问题。
我遇到的基本情况就是这样。废话不多说，下面记录了如何解决core3.0的跨域请求配置。
解决方法
- 在Startup.cs中的ConfigureServices中加入以下代码：
public void ConfigureServices(IServiceCollection services)
{
//在configservices中增加注册以下服务
//配置跨域处理 可以多配置Policy，应对不同的访问域
//以下代码是往自己项目中添加的内容
services.AddCors(options =>
{
options.AddPolicy("any", builder =>
{
builder.AllowAnyOrigin() //允许任何来源的主机访问
//builder.WithOrigins("localhost:5000")//设置允许访问的域
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials();//
});
});
}
- 在Startup.cs中的Configure中粘贴以下代码：
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Home/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
//以下代码是往自己项目中添加的内容
//其中“any” 是对应上面service里的’options.AddPolicy("any", builder =>‘ 中的 any
app.UseCors("any");//这样就使用到全局了。
}
扩展
axios在传参时，后端代码接收不到参数的可能原因有如下
参考链接：https://segmentfault.com/a/1190000012635783
https://segmentfault.com/a/1190000015261229
我是通过引用qs这种方案进行解决的
import qs from ‘qs’
data: qs.stringify(data)
具体使用代码如下：
/*
* 用户相关请求模块
*/
import qs from 'qs'
import request from '@/utils/request'
// 用户登录
export const login = data => {
console.log(qs.stringify(data))
return request({
method: 'POST',
url: 'StudentAccount/Login',
// data 用来设置 POST 请求体
// data: data // 同名时可以简写
data: qs.stringify(data)
})
}
需要注意的是：后端在接受参数时，需要与前端传递参数的字段同名，就会自动得到对应字段的值：
我前段传递的参数结构是这样的
mobile=13911111111&code=246810&Account=15735659622&Password=112233&LoginType=Phone&agree=true
Json格式是这样的
例如我的后端接收参数是这样写的：
public JsonResult Login(string mobile,string Account,string Password,string LoginType)
{
//功能逻辑代码实现
}
后端对应的变量名，就取到了前端对应属性的值，就此.net core+vue+axios前后端跨域post请求传参结束。
如上有什么问题，欢迎大家批评指正。
转载：https://blog.csdn.net/weixin_40359716/article/details/109528204