Nginx代理AspNetCore跨域问题

在前后端分离开发中,经常出现跨域的问题,本文是记录使用Nginx来反向代理AspNetCore应用时的跨域问题

跨域

对于同一域名(主机名),同一端口,同一协议,我们认为这是同一个域,只要有一个条件不满足,就会产生跨域问题,防止跨域本身是为了主机安全,所以推荐尽量从服务端进行控制,客户端控制不在本文范围内

解决跨域

开发

开发 asp.net core 应用时,我们可以使用跨域中间件来允许所有域访问,方便进行接口调试和测试

//Startup.cs
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
      if (env.IsDevelopment())
      {
            app.UseCors(x => x.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());
      }
 }

单体部署

但是正式生产环境中,不允许这样使用,也就是说即使配置了也还是会失效,推荐使用白名单模式,可以扩展配置文件 appsetting.json 文件,加上跨域配置

{
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "Server": "sql connection string"
  },
  "Cors": {
    "Open": true,
    "Policy": "http://www.ex.com"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  }
}

其中的 Cors 配置为跨域项,然后根据该项配置跨域,下面只是简单展示,具体还应加上验证

//Startup.cs 中 ConfigureServices
services.AddCors(options =>
{
    options.AddPolicy(name: "prod",
                      builder =>
                      {
                          if (Convert.ToBoolean(Configuration.GetSection("Cors").GetSection("Open").Value))
                          {
                              var cors = Configuration.GetSection("Cors").GetSection("Policy").Value.Split(',');
                              builder.WithOrigins(cors).WithMethods("GET", "POST", "OPTIONS");
                          }
                      });
});

//Startup.cs 中 Configure
app.UseCors("prod");

Nginx部署

使用 Nginx 进行反向代理,需要在 Nginx 上配置跨域规则,同时需要清除应用中的跨域规则,不然会出现两个跨域规则导致出错,配置 nginx.conf 如下

location / {
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
     }
}

想了解Nginx反向代理,点击这里

发布时间:2021-10-13
其他阅读

Linux中查看,添加,修改,删除用户和用户组

将用户分组是Linux系统中对用户进行管理及控制访问权限的一种手段。某个用户都属于某个用户组;一个组中可以有多个用户,一个用户也可以属于不同的组。当一个用户同时是多个组中的成员时,登录时所属的为默认组,而其他组称为附加组。本文将会介绍在 Linux 中查看,添加,修改,删除用户和用户组,注意:权限管理非常重要,可能一不小心就导致系统无法登录,请谨慎操作

查看原文

浅析web前端中的MVC模式

MVC是常见的软件架构设计模式,它通过分离关注点改进代码的组织方式。区别于软件设计模式,只是为了解决问题总结出的抽象方法,一种架构模式种往往会用到多种设计模式。

查看原文

JavaScript构建一个Markdown解析器

Markdown是一种轻量级标记语言,以简单易读的语法和可生成丰富多彩的内容,受到开发者们的青睐。无论是文档编写,还是博客传记都广泛使用到Markdown。本文介绍试用JavaScript来构建一个Markdown解析器,解锁Markdown的强大之处。

查看原文

解决sqlite依赖无法打包单文件的问题

在一次WPF开发中,选用了sqlite作为内嵌数据库,使用 ystem.Data.SQLite 库来调用,在使用 Fody 进行单文件打包时,发现打包文成后会出现 x86 和 x64 两个特定的文件夹,分别对应着32位和64位的 SQLite.Interop.dll,本文介绍修改项目文件来实现将 sqlite 通信库一起打包成单文件的方法。

查看原文

C#扩展方法

一般来说,当我们使用某个类时,需要用到一些特别的方法,但却没有时。一般做法可能是创建一个基于该类的派生类,添加我们想要的方法,但这样做无疑增加了复杂度。所以这时候,扩展方法出现了。

查看原文