亚洲必赢手机入口ABP .Net Core API和Angular前端APP独立布置跨域问题(No Access-Control-Allow-Origin)ABP .Net Core API和Angular前端APP独立布置跨域问题(No Access-Control-Allow-Origin),

by admin on 2018年10月7日

前言:

ABP .Net Core API和Angular前端APP独立布置跨域问题(No Access-Control-Allow-Origin),

前言:

通过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 URL, appBaseUrl 自身配备后的URL

亚洲必赢手机入口 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

 

若想前后端集成一起安排请查博客:http://www.cnblogs.com/donaldtdz/p/7882316.html

 

http://www.bkjia.com/C\_jc/1234125.htmlwww.bkjia.comtruehttp://www.bkjia.com/C\_jc/1234125.htmlTechArticleABP .Net Core
API和Angular前端APP独立布置跨域问题(No Access-Control-Allow-Origin),
前言: 通过ABP官网(https://aspnetboilerplate.com)下载ASP.NET Core
2…

通过ABP官网(https://aspnetboilerplate.com)下载ASP.NET Core 2.x +
Angular模板项目是按ReStful风格架构Web
API和angular前端是分开独立布置的,我同一开始分离部署及IIS后,前端访问API会发生跨域限制访问的题目,通过翻看代码,其实ABP框架自带跨域设置访问,只需要安排一下就是足以了,步骤如下:

 

一 IIS部署

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

本身之后端发布暨:http://localhost:8060/

亚洲必赢手机入口 8

自我的前端发布暨:http://localhost:8080/

 亚洲必赢手机入口 9

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.

 亚洲必赢手机入口 10

二 配置说明

通过查阅代码有少数单布局的地方:

  1. 前者配置当src/assets/appconfig.json

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

remoteServiceBaseUrl 远程访问API URL, appBaseUrl 自身配备后的URL

亚洲必赢手机入口 11

 

  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();
     });
});

 亚洲必赢手机入口 12

三 运行

配置后再也做客客户端 访问成功

 亚洲必赢手机入口 13

亚洲必赢手机入口 14

一经安排没有问题,在PUT和DELETE请求仍然保证跨域问题,很有或是服务器限制了谓词访问,请参考博客:http://www.cnblogs.com/donaldtdz/p/8094300.html

假若想前后端集成一起安排请查博客:http://www.cnblogs.com/donaldtdz/p/7882316.html

 

相关文章

发表评论

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

网站地图xml地图