龙8官网long8

当前位置:龙8官网long8 > 龙8官网long8 > API和Angular前端APP独立部署跨域问题

API和Angular前端APP独立部署跨域问题

来源:http://www.sketchydesignstudio.com 作者:龙8官网long8 时间:2019-11-17 14:54

前言:

通过ABP官网( Core 2.x + Angular模板项目是按ReStful风格架构Web API和angular前端是抽离独立安顿的,作者一早先分别安顿到IIS后,前端访谈API会生出跨域限定访谈的主题材料,通过查看代码,其实ABP框架自带跨域设置访谈,只须求安插一下就能够了,步骤如下:

 

一 IIS部署

因此ABP官方网站模板成立项目,然后分别打包前端和后端程序发表到IIS:

本身的后端宣布到:

图片 1

本人的前端发表到:

 图片 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 '' is therefore not allowed access.

 图片 3

二 配置表达

透过翻看代码有五个布局的地点:

  1. 前边三个配置在src/assets/appconfig.json

    { "remoteServiceBaseUrl": "", "appBaseUrl": "" }

remoteServiceBaseUrl 远程访谈API UCRUISERL, appBaseUrl 自己配备后的ULX570L

图片 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供给照旧包跨域难点,很有极大可能率是服务器节制了谓词访谈,请参见博客:

如想前后端集成一同陈设请查博客:

 

本文由龙8官网long8发布于龙8官网long8,转载请注明出处:API和Angular前端APP独立部署跨域问题

关键词:

上一篇:七牛镜像的使用

下一篇:没有了