在ABP的Web层中实现复杂请求跨域访问

在最近的项目中,后端使用ABP,前端采用React,前后端完全分离。其中大部分接口都通过WebApi层调用,项目中未使用Session。但最后在做一个留言的验证码时,使用了Session验证的方式,所以将验证码请求与校验功能放在了Web层。由于测试阶段前后端不同域,涉及到跨域请求的问题。跨域问题可以通过代理等手段解决,但是也可以在后端做些简单的修改来进行实现。WebApi的跨域处理比较简单,有官方给出的解决方案。但是Web层一般不涉及跨域,所以自己进行了探索实现。

一、常见方案

  1. 在web.config中添加配置

    <system.webServer>
     <httpProtocol>
       <customHeaders>
      <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
      <add name="Access-Control-Allow-Headers" value="x-requested-with"/>
      <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
     </httpProtocol>
    </system.webServer>
  2. 在被访问的控制器上加上AllowCrossSite的Attribute

原文地址:https://www.cnblogs.com/jiujiduilie/p/8442682.html

时间: 2024-11-06 22:05:01

在ABP的Web层中实现复杂请求跨域访问的相关文章

Web API中使用CORS解决跨域(暂存)

Web API中使用Cros解决跨域 如果两个页面的协议,端口和域名都相同,则两个页面具有相同的源,注:IE不考虑端口,同源策略不会阻止浏览器发送请求,但是它会阻止应用程序看到响应.如下图所示 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)它允许浏览器向跨源服务器,发出请求.CORS需要浏览器和服务器同时支持,目前,主流的浏览器都支持CORS,因此实现CORS通信的关键是服务器.CORS是通过目标服务器返回的Header设

如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问。

由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的问题. 刚开始没做任何处理,用jsonp的方式调用 web api 接口,总是报一个错误,如下: 如果你想用JSONP来获得跨域的数据,WebAPI本身是不支持javascript的callback的,它返回的JSON是这样的: {"YourSignature":"嫁人要嫁程序员,钱多话少死得早"} 然而,JSONP请求期望得到这样的JSON

angular中的$http请求跨域,采用CROS方式解决

anjular中的controller层$http服务,解决跨域请求. js书写: /**     * 采用CORS方式实现ajax跨域请求     */    $http({        method:"post", // 请求方式可以为post,也可以为get        params:"",        url:"http://localhost:8080/getArray", // 跨域请求的路径    }).success(  

在Vue中如何使用axios跨域访问数据(转)

最近在项目中需要用到axios,所以就恶补一下这个axios到底是什么东东.越来它是vue-resource的替代品,官网也说了,以后都用axios, vue-resource不在维护.那么这个axios怎么用呢,上网搜索了一大堆,基本上都是雷同,我也不知道那些作者有没有在本地测试过.至少我按照网上的做法,总不能成功.经过几天的奋斗,我终于把它搞清楚了,为了不让其他的小伙伴们走弯路,我把我在实际操作中的例子分享给大家,希望对大家有用. 一.安装axios 老规矩,要想使用axios,我们得安装它

在docker容器中为elasticsearch配置跨域访问

一.在docker容器中进入elasticsearch对应的容器 docker exec -it [容器名] /bin/bash 二.安装vim编辑器 因为我们需要更改配置文件,安装过的朋友就不用安装了 apt-get update apt-get install vim 三.进入到/config/elasticsearch.yml配置文件,添加一下两行代码 http.cors.enabled: true http.cors.allow-origin: "*" 四.重启容器,配置完成

golang web服务器处理前端HTTP请求跨域的方法

直接上代码:) package main import ( "flag" "fmt" "net" "net/http") type httpServer struct {} func (s *httpServer) ServeHTTP(w http.ResponseWriter, r *http.Request) { // Stop here if its Preflighted OPTIONS request if orig

Web Api 2(Cors)Ajax跨域访问

支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示 随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Angularjs的框架来做UI,而数据则由另一个Web Api 的网站项目来支撑.注意,这里是两个Web网站项目了,前端项目主要负责界面的呈现和一些前端的相应业务逻辑处理,而Web Api则负责提供数据. 这样问题就来了,如果前端通过ajax访问Web Api项目话,就涉及到跨域了.我们知道,如果直接访问,

Angular2中对ASP.NET MVC跨域访问

应用场景 项目开发决定使用angular2进行前后端分离开发,由我负责后端服务的开发,起初选择的是web api进行开发.对跨域访问通过API中间件+过滤器对跨域访问进行支持.开发一段后,通知需要移植到MVC4项目中一同发布angular2并且放弃API,但前期开发仍然需要分离开发. 遇到的问题 想继续使用中间件和过滤器的方式对MVC中的Action进行操作和限制,但经过尝试后发现行不通.主要问题有几下几点. API的处理管道和MVC的处理管道是两个完全不同的东西,所以原来用于API中的编码和方

支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示

随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Angularjs的框架来做UI,而数据则由另一个Web Api 的网站项目来支撑.注意,这里是两个Web网站项目了,前端项目主要负责界面的呈现和一些前端的相应业务逻辑处理,而Web Api则负责提供数据. 这样问题就来了,如果前端通过ajax访问Web Api项目话,就涉及到跨域了.我们知道,如果直接访问,正常情况下Web Api是不允许这样做的,这涉及到安全问题.所以,今天我们这篇文章的主