API和Angular前端应用软件独立布署跨域难点

前言:

通过ABP官网(https://aspnetboilerplate.com)下载ASP.NET Core 二.x +
Angular模板项目是按ReStful风格架构Web
API和angular前端是分别独立布置的,作者一开端分别布置到IIS后,前端访问API会发出跨域限制访问的标题,通过查看代码,其实ABP框架自带跨域设置访问,只供给配置一下就能够了,步骤如下:

 

一 IIS部署

通过ABP官网模板创制项目,然后分别打包前端和后端程序发布到IIS:

自身的后端发表到:http://localhost:8060/

房地产项目 1

本身的前端公布到:http://localhost:8080/

 房地产项目 2

F1二 报错 不容许跨域访问:Response to preflight request doesn’t pass access
control check: No ‘Access-Control-Allow-Origin’ header is present on the
requested resource. Origin ‘http://localhost:8080‘ is therefore not
allowed access.

 房地产项目 3

二 配置表明

透过查阅代码有七个布局的地点:

  1. 前端配置在src/assets/appconfig.json

    {
    “remoteServiceBaseUrl”: “http://localhost:8060“,
    “appBaseUrl”: “http://localhost:8080
    }

remoteServiceBaseUrl 远程访问API URubiconL, appBaseUrl 自个儿配备后的U翼虎L

房地产项目 4

 

  1. 后端配置在Host项目 appsettings.json

    “App”: {

     "ServerRootAddress": "http://localhost:8060/",
     "ClientRootAddress": "http://localhost:8080/",
     "CorsOrigins": "http://localhost:8080/"
    

    }

房地产项目,ClientRootAddress 为客户端站点布局, CorsOrigins
为允许跨域客户端站点布局
,能够有多少个用逗号分开,配置在Startup.cs里进行配备

// Configure CORS for angular2 UI
services.AddCors(options =>
{
  options.AddPolicy(DefaultCorsPolicyName, builder =>
    {
       // App:CorsOrigins in appsettings.json can contain more than one address separated by comma.
       builder
       .WithOrigins(_appConfiguration["App:CorsOrigins"].Split(",", StringSplitOptions.RemoveEmptyEntries)
       .Select(o => o.RemovePostFix("/"))
       .ToArray())
       .AllowAnyHeader()
       .AllowAnyMethod();
     });
});

 房地产项目 5

三 运行

布署后再一次访问客户端 访问成功

 房地产项目 6

房地产项目 7

假定铺排没至极,在PUT和DELETE请求照旧包跨域难点,很有希望是服务器限制了谓词访问,请参见博客:http://www.cnblogs.com/donaldtdz/p/8094300.html

如想前后端集成一起陈设请查博客:http://www.cnblogs.com/donaldtdz/p/7882316.html

 

相关文章