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/
我的前端发布到:http://localhost:8080/
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.
二 配置说明
通过查看代码有两个配置的地方:
1. 前端配置在src/assets/appconfig.json
{
"remoteServiceBaseUrl": "http://localhost:8060",
"appBaseUrl": "http://localhost:8080"
}
remoteServiceBaseUrl 远程访问API URL, appBaseUrl 自身部署后的URL
2. 后端配置在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();
});
});
三 运行
配置后再次访问客户端 访问成功
如果配置没有问题,在PUT和DELETE请求仍然包跨域问题,很有可能是服务器限制了谓词访问,请参考博客:http://www.cnblogs.com/donaldtdz/p/8094300.html
如想前后端集成一起部署请查博客:http://www.cnblogs.com/donaldtdz/p/7882316.html
ABP .Net Core API和Angular前端APP独立部署跨域问题(No Access-Control-Allow-Origin)的更多相关文章
- ABP .Net Core API和Angular前端APP集成部署
前言:在ABP官网(https://aspnetboilerplate.com)生成的.Net Core + Angular项目前后端是两个独立的项目,我们可以分开部署,也可以将前端和Web API一 ...
- Web 前端必备的各种跨域方式汇总
Web 前端必备的各种跨域方式汇总 跨域方式汇总 同源策略 协议相同 + 域名相同 + 端口相同 https://www.xgqfrms.xyz/index.html https://www.xgqf ...
- 前后端分离框架前端react,后端springboot跨域问题分析
前后端分离框架前端react,后端springboot跨域问题分析 为啥跨域了 前端react的设置 springboot后端设置 为啥跨域了 由于前后端不在一个端口上,也是属于跨域问题的一种,所以必 ...
- Asp.Net Core 3.0 学习3、Web Api 文件上传 Ajax请求以及跨域问题
1.创建Api项目 我用的是VS2019 Core3.1 .打开Vs2019 创建Asp.Net Core Web应用程序命名CoreWebApi 创建选择API 在Controller文件夹下面添加 ...
- angular cli 反向代理实现跨域
版本: 1.后端实现跨域(php) header("Access-Control-Allow-Origin: *"); // // 响应类型 // header('Access-C ...
- 改变mvc web api 支持android ,ios ,ajax等方式跨域调用
公司一个移动后端的项目用到了 webapi 项目搭建到外网环境共app开发者调用测试接口时遇到了一个问题 接口不允许跨域调用 .查阅资料明白 同源策略原则根据请求报头值 Origin 与回应报头值 A ...
- ASP.NET Core 2.1与2.2 SignalR CORS 跨域问题
将 SignalR 集成到 ASP.NET Core api 程序的时候,按照官方 DEMO 配置完成,本地访问没有问题,但是发布之后一直报跨域问题,本地是这样设置的: Asp.net core 2. ...
- node.js如何让前端请求时能跨域
1995年,Netscape提出了一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同. 当一个浏览器的两个tab页中分别打开来 百度和谷 ...
- 用 Nokitjs 解决前端开发中的跨域问题
问题 在开发一些「单页应用」时,通常会使用 Ajax 和服务器通讯,比如 RESTful API,通常「前端」和「服务端 API」可能是有不同人员在负责,也不在同一个工程下,那么开发过程中就可能会遇到 ...
随机推荐
- select2 取值 遍历 设置默认值
select2 取值 遍历 设置默认值 本章内容主要介绍Select2 的初始化,获取选中值,设置默认值,三个方法.Select2 美化了单选框,复选框和下拉框,特别是下拉框多选的问题.但同时,Sel ...
- python中函数的参数解析
python中函数的各种参数梳理: 1.形参:函数定义时传入的参数 2.实参:函数调用时传入的参数 (有形参必传实参,形参里自身特点可不传的,可传可不传) 3.缺省参数:不传为默认值,传了会覆盖(下面 ...
- Play-With-Docker在chrome上的插件
一键使用PWD 在chrome扩展中,找到"Play With Docker"插件,并安装在chrome浏览器中 进入hub.docker.com网站,搜索熟悉的docker镜像. ...
- ptrdiff_t 和 size_t
size_t和ptrdiff_t常常用来指示数组长度. size_t常用于表示数组的大小,可以一般的将他看为 typedef unsigned int size_t,实质是一个无符号整形.包含在头文件 ...
- Go语言教程5 if switch select
首先您需要有php或是c的基础. 否则可能看不明白 方法如下 if 表达式{ //需要注意的是 没有括号. 没错. 没有括号 比如 if 1>2 {}else{} } else { } s ...
- 构建Nginx均衡LAMP高性能服务器
LNAMP(Linux+Nginx+Apache+Mysql+PHP)架构受到很多IT企业的青睐,取代了原来认为很好的LNMP(Linux+Nginx+Mysql+PHP)架构,那我们说LNAMP到底 ...
- 匈牙利标记法定义ECMAScript变量前缀
匈牙利标记法定义ECMAScript变量前缀 类型 前缀 示例 数组 a aArray 布尔型 b bMale 浮点型(数字) f fTax 函数 fn fnSwap 整型(数字) i iAge ...
- 4、C#基础 - C# 的 常见概念简述
在上篇文章中,你跟着我写了一个HelloWorld,本篇中,我们来谈谈一些C#程序中的小概念 1.C# 程序结构 一个 C# 程序主要包括以下部分: 命名空间声明(Namespace declarat ...
- ZTREE改版 -- 增删减 -- 图标字体化 完整改版
引言 这次主要更新增删改功能以及修复存在的一些bug:图标能动态改变,回调函数添加 ZTREE改版功能完善 前面文章对于改版过程做了较详细的解释,这里就不多加赘述了,直接看效果图: 增加按钮: 修改节 ...
- Redis的简单使用和介绍
1.什么是NoSQL NoSQL = Not Only SQL 非关系型的数据库 2. 为什么需要NoSQL High performance 高并发读写 ...