PCB WebAPI跨域访问实现方式

Posted 2021-01-04 pcbren

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了PCB WebAPI跨域访问实现方式相关的知识，希望对你有一定的参考价值。

我们写WebAPI不仅自己系统调用，也需要给其它系统调用，那么如何实现跨域访问了，在这里介绍2种方法实现

方法一.修改Web.Config文件实现

此方法是全局实现跨域，如果仅想某个方法实现跨域此方法不支持，可看下面一个方法自由程度更高些

    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
      </customHeaders>
    </httpProtocol>

方法二.增加ActionFilterAttribute 实现

此方法可以全局，控制器，方法控制，自由度非常之高，实现跨域力推此方法来实现

1.新建跨域CrossSiteAttribute类

    public class CrossSiteAttribute : ActionFilterAttribute
    {
        private const string AccessControlAllowOrigin = "Access-Control-Allow-Origin";
        private const string OriginHeaderdefault = "*";
        public override void OnActionExecuted(HttpActionExecutedContext ActionExecutedContext)
        {
            ActionExecutedContext.Response.Headers.Add(AccessControlAllowOrigin, OriginHeaderdefault);
        }
    }

2.代码应用

3.失败测试演示

4.成功测试演示

5.附html本地Ajax测试网页

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
    <title>PCB Ajax请求</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#testAjax").click(function(){
             var httpurl = $("#url").val();
             //httpurl = "http://localhost:19094/api/GetPpeflow/GetPpeflow2";
            $.ajax({
               type: "get",
               url: httpurl,
               data: "",
               success: function(data,status){
                        $("#ReturnSate").val(status);
                        $("#ReturnSate").css(\'background\',\'green\');
                        $("#ReturnData").val(JSON.stringify(data));
                  },
                    error: function (e) {
                        $("#ReturnSate").val(status);s
                        $("#ReturnSate").css(\'background\',\'red\');
                        $("#ReturnData").val(\'错误\');
                    },
                    complete: function () {
                         alert(\'执行完成\');
                    }
            });
         });
    });
</script>    
</head
    <body style="margin: 20px;">
        <div ><h2>PCB Ajax请求</h2></div>
    <div class="form-group">
        <label for="name">Web地址</label>
        <input type="text" class="form-control" id="url"  placeholder="Web地址">
        <label for="name">状态</label>
        <input type="text" class="form-control" id="ReturnSate"  placeholder="状态">
        <label for="name">返回数据</label>
        <input type="text" class="form-control" id="ReturnData"  placeholder="返回数据">
    </div>
    <button  id="testAjax" >提交</button>
   </body>
</html>

以上是关于PCB WebAPI跨域访问实现方式的主要内容，如果未能解决你的问题，请参考以下文章

enablecors-webapi跨域为何不能实现？都有哪些注意事项

html ajax访问webapi 跨域

webapi跨域使用session

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

System.Web.Http.Cors配置跨域访问的两种方式

PCB WebAPI跨域访问 实现方式

PCB WebAPI跨域访问实现方式