VueJs 无法从 C# Web api 会话获取数据

Question

我在从 C# Web api 会话获取数据时遇到问题。仅当我尝试从 https://localhost:8080 （vue js 端口）获取到我的 api (https://localhost:7251) 时，才会出现问题。 当我使用 insomnia/swagger 时，它看起来非常好。

这是 Vue.js 获取的代码：

<script>
import axios from "axios";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Header",
  data() {
    return {
      user: {}, // Domyślnie pusty obiekt dla użytkownika
    };
  },
  methods: {
    async getUser() {
      try {
        const result = await axios.get(
          "https://localhost:7251/api/Auths/GetUser",
          {
            headers: {
              "Content-Type": "application/json",
            },
            withCredentials: true, // Włącza obsługę ciasteczek dla sesji
            mode: "cors", // Wyraźnie określa, że żądanie jest między domenami
          }
        );
        console.log("RESULT: ", result);
        if (result.status === 200) {
          console.warn("USER DATA: ", result.data);
          this.user = result.data; // Zakładamy, że result.data ma właściwość 'name'
        } else {
          console.error("Failed to fetch user data");
        }
      } catch (error) {
        console.error(
          "Error fetching user data:",
          error.response?.data || error.message
        );
      }
    },
  },
  mounted() {
    this.getUser(); // Wywołanie funkcji przy montowaniu komponentu
  },
};
</script>

这就是 vue.config.js：

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    https: true, // Włącza HTTPS
    allowedHosts: "all",
  },
});

这是 Program.cs 文件上的项目设置：

Cors政策：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAllOrigins", policy =>
    {
        policy.WithOrigins("https://localhost:8080")// Domena frontendu
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials(); // Umożliwia przesyłanie ciasteczek/sesji
    });
});
app.UseCors("AllowAllOrigins");

会议：

builder.Services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
builder.Services.AddDistributedMemoryCache();
builder.Services.AddSession(options =>
{
    options.Cookie.Name = "Session.Works";
    options.IdleTimeout = TimeSpan.FromMinutes(30); // Czas wygasniecia sesji
    options.Cookie.IsEssential = true; // Sesje beda dzialaly nawet bez zgody na cookies
    options.Cookie.SameSite = SameSiteMode.None;     // Pozwala na prawidlowe przekazywanie ciasteczka
    //options.Cookie.SecurePolicy = CookieSecurePolicy.Always;
    options.Cookie.SecurePolicy = CookieSecurePolicy.SameAsRequest;

});

从会话获取时得到的只是“会话无法检索用户”和 500 内部服务器错误。

它仅发生在客户端，登录/注册调用工作正常。

我该怎么办？

Answer 1

问题解决了。 由于 Program.cs 文件中的顺序而创建了错误，正确的顺序是：

app.UseHttpsRedirection();
app.UseCookiePolicy();
app.UseRouting();
app.UseCors("AllowVueApp");
app.UseAuthentication();
app.UseAuthorization();
app.UseSession();
app.MapControllers();