概述:我这里项目中后台使用.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页面发布地址

第六步:测试,成功解决

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐