Angular 2中的反伪造令牌实现和使用Aps.Net内核的Web Api

我在Angular 2中有单独的前端项目，没有使用MVC，后端项目是WebAPI（Asp.NETCore），两者都托管在不同的域上。我实现了反伪造令牌功能，但它不起作用

前端项目（UI）-

http://localhost:8080/

后端项目（Web Api）-

http://localhost:4823/

我能够在每个请求中接收和发送

XSRF令牌

cookie，但api给出

400错误请求

错误。 我跟踪了这个链接-

Startup.cs

-

public void ConfigureServices(IServiceCollection services)
{
    services.AddAntiforgery(options => options.HeaderName = "X-XSRF-TOKEN");
    services.AddCors(options =>
    {
        options.AddPolicy("AllowAllCorsPolicy",
        builder => builder.AllowAnyOrigin()
                   .AllowAnyMethod()
                   .AllowAnyHeader()
                   .AllowCredentials());
     });
}


public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory, IServiceProvider serviceProvider, IAntiforgery antiforgery)
{
    app.Use(async (context, next) =>
      {
        if (context.Request.Path == "/")
           {
             //send the request token as a JavaScript-readable cookie, and Angular will use it by default
             var tokens = antiforgery.GetAndStoreTokens(context);
             context.Response.Cookies.Append("XSRF-TOKEN", tokens.RequestToken, new CookieOptions { HttpOnly = false });
           }
       }
}

控制器代码-

[EnableCors("AllowAllCorsPolicy")]
[ValidateAntiForgeryToken]
[Produces("application/json")]
[Route("api/Aoi")]
public class AoiController : Controller
{
 ...
}

角码-

let options = new RequestOptions({ headers: headers, withCredentials:true });
this._http.post(this.aoiUrl, bodydata, options)
       .map((res: Response) => {
          let data = res.json();
          return data;
})

---

不能跨域共享Cookie。因此，即使您的web api项目将

XSRF-TOKEN

附加到其上下文响应中，它也不可用于托管在单独域中的前端应用程序。通过配置

AddAntiforgery（）

服务的选项，我看到了一些在两个应用程序中都使用固定cookie名称的解决方法。

我认为您应该能够通过启用CORS来实现这一点。有关更多信息，请参见此处-

按如下方式配置Antiforgery cookie：

service.AddAntiforgery(options =>
            {
                options.HeaderName = "X-XSRF-TOKEN";
                options.Cookie.Name = "XSRF-TOKEN";
                options.Cookie.HttpOnly = false;
                options.Cookie.Path = "/";
                options.Cookie.SameSite = SameSiteMode.None;
            });

---

我最近也在研究这个问题，做了一些测试，也找到了解决办法。解决方案还不错，它允许您开始开发时更接近部署场景，而不是使用端口

我发现在.Net Core Web Api应用程序中设置和启用CORS将不允许您使用内置的AntiForgeryToken机制。我找到的解决方案是使用Nginx

只需下载Nginx并将可执行文件和包放在您选择的位置。我使用C:\nginx

在您所在的位置，您需要编辑Nginx配置文件。（./conf/nginx.conf）

在nginx.conf文件中，请查看您的服务器{}部分与此类似：

server {
  listen: 80;
  listen: 443 ssl;
  server_name: localhost;

  #My UI Project
        location ^~ / {
            proxy_pass http://127.0.0.1:4200/;
            proxy_set_header Upgrade $http_upgrade;
            #proxy_set_header Connection 'upgrade';
            proxy_set_header Connection $http_connection;
            proxy_set_header Host $host;
            proxy_http_version 1.1;
            proxy_cache_bypass $http_upgrade;
        }

        location ^~ /sockjs-node/ {
            proxy_pass htts://127.0.0.1:4200;
            proxy_set_header Upgrade $http_upgrade;
            #proxy_set_header Connection 'upgrade';
            proxy_set_header Connection $http_connection;
            proxy_set_header Host $host;
            proxy_http_version 1.1;
            proxy_cache_bypass $http_upgrade;
        }

        #My API Project
        location ^~ /myapi/ {
            proxy_pass http://127.0.0.1:5000;
            proxy_set_header Upgrade $http_upgrade;
            #proxy_set_header Connection 'upgrade';
            proxy_set_header Connection $http_connection;
            proxy_set_header Host $host;
            proxy_http_version 1.1;
            proxy_cache_bypass $http_upgrade;
        }
}

这里我列出了我在web服务器根目录下运行的Angular UI项目（“我的UI”）（ei:

http://localhost

）

然后，我们将使用与Angular项目相同的url列出sockjs节点

最后，我列出了我的API项目（“我的API”），并在该位置添加了

/myapi/

路径。然后可以从

http://localhost/myapi

和我的角度项目可从

http://locahost

。现在两者都在使用同一个域

在开始开发工作时启动nginx服务器，然后像平常一样启动api项目和Angular项目

在所有这些都运行之后，您可以在localhost上导航到您的应用程序，如果您想导航到Api项目中的端点，您可以转到类似

http://localhost/myapi/api/values/1

还请注意，我已经注释掉了这一行：

proxy_set_头连接“升级”位于nginx.conf位置，并改为使用：
proxy\u set\u头连接$http\u连接。为了将数据发送到非GET端点并使其正常工作，您需要这样做

另一件需要注意的事情是，从我在这个设置中发现的情况来看，当使用AntiforgeryToken时，如果在你的startup.cs中设置它们。。。
options.Filters.Add（）
或
services.addScope（）
而且使用
[AutoValidateAntiforgeryToken]
类级属性似乎不会启动任何验证。我必须将
[ValidateAntiForgeryToken]
属性添加到要运行反伪造验证的方法中。也许有人可以对这一部分发表评论