.Net6 下 WebApi使用session,前端使用axios读取不到session问题
.Net6下 WebApi、MinimalApi前后端分离, 使用session,与前端axios请求交互session娶不到值
·
概述:我这里项目中后台使用.Net6下的minimalApi开发,使用session存储登录的验证码。前端使用vue编写,前后端分离,axios请求。
第一步:后端添加session支持,在Program.cs中添加如下代码
builder.Services.AddDistributedMemoryCache();//启用内存缓存
builder.Services.AddSession(options =>
{
options.IdleTimeout = TimeSpan.FromMinutes(5);//设置session过期时间
options.Cookie.IsEssential = true;
});
app.UseSession();//使用session
第二步:后端添加跨域支持
builder.Services.AddCors(policy =>
{
policy.AddPolicy("CorsPolicy", opt => opt
.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod()
.WithExposedHeaders("X-Pagination"));
});
app.UseCors("CorsPolicy");//支持跨域
第三步:前端axios添加cookie支持,我这里是封装的一个axios工具类
axios.defaults.withCredentials = true; //支持cookie写入
axios封装全部代码
import axios from 'axios';
axios.defaults.withCredentials = true; //支持cookie写入
import {
Message
} from 'element-ui';
import store from '../../store/store.js';
import router from '../../router/index.js';
// 创建axios实例
let instance = axios.create({
// timeout: 10000,
baseURL: store.state.serverAddress,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
});
instance.all = axios.all; // 设置axios并发请求
// 请求拦截器
instance.interceptors.request.use(config => {
//这里可以判断用户是否登录状态,取token授权信息等
let _token = '';
//config.headers.Authorization = 'Bearer ' + _token;
return config
}, error => {
console.log(error);
return Promise.reject(error);
})
// 响应拦截器
instance.interceptors.response.use(response => {
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据,否则的话抛出错误
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
}, error => {
console.log(Object.entries(error));
const {
config,
code,
request,
response,
isAxiosError,
toJSON
} = error;
if (response) {
errorHandle(response.status, response.data.message);
return Promise.reject(response);
} else {
// 超时提示
if (error.message.includes('timeout')) {
Message({
message: '请求超时,请稍后重试!',
type: 'warning'
});
return Promise.reject(error);
} else if (!window.navigator.onLine) {
Message({
message: '请检查当前网络是否通畅!',
type: 'warning'
});
} else {
Message.error('请求异常,请查看输出控制台!');
return Promise.reject(error);
}
}
})
const errorHandle = (status, other) => {
// 状态码判断
switch (status) {
case 400:
Message.error('请求错误!');
break;
case 401:
//loginOut();
break;
// 403 权限不足,拒绝访问
case 403:
Message.error('权限不足,拒绝访问!');
break;
// 404请求不存在
case 404:
Message.error('请求的资源不存在或请求地址出错!');
break;
// 服务器错误
case 500:
Message.error('服务器错误!');
break;
default:
console.log(other);
Message.error('其它错误,状态码【' + status + '】!');
break;
}
}
export default instance;
第四步:发现这样修改之后axios请求会抛出一个异常
第五步:后端解决这个异常,我们需要修改后端跨域支持的代码
builder.Services.AddCors(policy =>
{
policy.AddPolicy("CorsPolicy", opt => opt
//.AllowAnyOrigin() //注释这个方法,不能与.AllowCredentials()一起用
.WithOrigins(AppSettings.WebPublishAddress) //这里AppSettings.WebPublishAddress是我配置文件里配置的前端发布地址
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials() //添加这个方法
.WithExposedHeaders("X-Pagination"));
});
//这里嫌每次都要注入IConfiguration 取配置文件麻烦,通过这个方法取到一个静态类里面
public static string GetSettings(string key)
{
var _config = new ConfigurationBuilder()
.AddInMemoryCollection()
.SetBasePath(Directory.GetCurrentDirectory())
.AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
.Build();
return _config[key];
}
//appsettings.json中配置
"WebPublishAddress": "http://localhost:8080",//web页面发布地址
第六步:测试,成功解决
更多推荐
已为社区贡献1条内容
所有评论(0)