API和Angular前端APP独立陈设跨域难题

by admin on 2019年12月3日

前言:

通过ABP官网(https://aspnetboilerplate.com)下载ASP.NET Core 2.x +
Angular模板项目是按ReStful风格结构Web
API和angular前端是分别独立布署的,笔者一同始分离陈设到IIS后,前端访问API会产生跨域限定访谈的题目,通过查看代码,其实ABP框架自带跨域设置访谈,只须求配置一下就能够了,步骤如下:

 

一 IIS部署

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

自家的后端宣布到:http://localhost:8060/

图片 1

自己的前端发布到:http://localhost:8080/

 图片 2

F12 报错 区别意跨域访谈: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 U索罗德L, appBaseUrl 本人配备后的UKugaL

图片 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

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图