asp net core mvc 跨域ajax解决方案

最新推荐文章于 2024-02-08 17:06:51 发布

.NET跨平台

最新推荐文章于 2024-02-08 17:06:51 发布

阅读量489

点赞数

CC 4.0 BY-SA版权

分类专栏： ASP.NET Core MVC | Blazor 文章标签： ajax mvc javascript

原文链接：https://blog.youkuaiyun.com/WuLex

ASP.NET Core MVC | Blazor 专栏收录该内容

234 篇文章

订阅专栏

本文介绍了在服务端配置CORS策略的方法，通过在Startup文件中设置允许的源，并在API控制器启用CORS，确保jQuery和axios的跨域请求能携带Cookie。示例代码展示了如何使用jQuery和axios进行跨域GET请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、配置服务端

在Startup文件中配置Cors策略：

IEnumerable<Client> clients= Configuration.GetSection("Clients").Get(typeof(IEnumerable<Client>)) as IEnumerable<Client>;

            List<string> urls = new List<string>();
            foreach (var client in clients)
            {
                urls.AddRange(client.AllowedCorsOrigins);
            }
            services.AddCors(options =>
            {
                options.AddPolicy("default",
                    builder => builder.WithOrigins(urls.ToArray())
                                    .AllowAnyHeader()
                                    .AllowCredentials()
                                    .AllowAnyMethod());
            });

启用CORS策略，可以在Startup文件中配置，也可以在具体的ApiController中配置，代码分别如下：

 app.UseCors("default");

[Authorize]
[EnableCors("default")]
public class NavigationMenuController:Controller
{
    private NavigationMenuService navigationMenuService;

    public NavigationMenuController(NavigationMenuService navigationMenuService)
    {
        this.navigationMenuService = navigationMenuService;
    }
}

2、JQuery请求

$.ajax({
    url: 'http://localhost:5000/api/Private/Values/Identity',
    type: 'GET',
    dataType: 'json',
    crossDomain: true,
    xhrFields: {
        withCredentials: true
    },
    success: function (result) {
        $('#platformResult').val(JSON.stringify(result));
    }
});

红字是关键，值得注意的是需要配置 withCredentials，否则请求不会带上Cookie。

3、 `axios`请求

  axios({
    url:
    config.authority +
    "/api/xxxxxxxxxx?clientId=" +
    escape(config.client_id),
    method: "GET",
    withCredentials: true
  }).then(function (result) {
    if (result.success == undefined) {
      self.menuItems = result || [];
    }
  });