原文：https://blog.csdn.net/z69183787/article/details/78954325

背景：

　　别个的项目，要开发App接口，要求用前端AJAX的方式访问接口数据。

　　后台项目用的asp.net mvc，但是所有的方法都是写在controller层里面的，

　　App接口要求的功能大部分都是controller层里面的方法，

　　肯定不可能再重新写一遍接口咯，时间也来不及，并且方法也会重复，不利于维护。

　　

主要做了两点：

　　1、让后端支持跨域

　　2、跨域时附带把cookie传过去

这里有一个坑，特别注意哈！！！：服务器端 Access-Control-Allow-Credentials = true时，参数Access-Control-Allow-Origin 的值不能为 '*' 。

跨域的代码：

后端：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace CLBIM.Filter

{

    /// <summary>

    /// 运行跨域

    /// </summary>

    public class AllowCrossSiteJsonAttribute : ActionFilterAttribute

    {

        private string[] _domains;

        public AllowCrossSiteJsonAttribute()

        {

            _domains = new string[] { };

        }

        public AllowCrossSiteJsonAttribute(string domain)

        {

            _domains = new string[] { domain };

        }

        public AllowCrossSiteJsonAttribute(string[] domains)

        {

            _domains = domains;

        }

        public override void OnActionExecuting(ActionExecutingContext filterContext)

        {

            //var context = filterContext.RequestContext.HttpContext;

            //var host = context.Request.UrlReferrer?.Host;

            //if (host != null && _domains.Contains(host))

            //{

            //    filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");

            //}

            //服务器端 Access-Control-Allow-Credentials = true时，参数Access-Control-Allow-Origin 的值不能为 '*' 。

            var Origin = filterContext.RequestContext.HttpContext.Request.Headers["Origin"];

            filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", Origin);

            filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Credentials", "true");

            base.OnActionExecuting(filterContext);

        }

    }

}

前端：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <style type="text/css">

        input {

            width: 200px;

            margin: 5px;

            height: 30px;

        }

    </style>

    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

</head>

<body>

    <div id="div1"></div>

    <script type="text/javascript">

        var url = 'http://192.168.2.73:9012';//远程服务地址

        url = 'http://183.66.231.18:8050';

        //带cookie的方式

        //查看返回的数据：F12 -> Network -> XHR -> 点开一个具体的请求 -> Preview

        //登录

        function fn1() {

            var model = {

                UserName: "admin",

                Password: "123456",

            };

            $.ajax({

                type: "POST",

                url: url + "/Login/VerifyLogin",

                data: model,

                dataType: 'json',

                xhrFields: {

                    withCredentials: true

                },

                crossDomain: true,

                success: function (response) {

                    console.log(response);//返回的内容

                }

            });

        }

        //退出登录

        function fn2() {

            $.ajax({

                type: "POST",

                url: url + "/Login/LogOut",

                dataType: 'json',

                xhrFields: {

                    withCredentials: true

                },

                crossDomain: true,

                success: function (response) {

                    console.log(response);

                }

            });

        }

        //获取菜单

        function fn3() {

            $.ajax({

                type: "POST",

                url: url + "/SystemManage/Menu/GetAllMenu",

                dataType: 'json',

                xhrFields: {

                    withCredentials: true

                },

                crossDomain: true,

                success: function (response) {

                    console.log(response);

                }

            });

        }

        //生成按钮

        var fn_names = [];

        fn_names.push("带cookie-登录");

        fn_names.push("带cookie-退出登录");

        fn_names.push("带cookie-获取菜单");

        var CreateHtml = function () {

            var strHtml = '';

            for (var i = 0; i < fn_names.length; i++) {

                var num = i + 1;

                var name = fn_names[i];

                strHtml += '<input type="button" value="fn' + num + '  ' + name + '" onclick="fn' + num + '()" />';

            }

            $("#div1").html(strHtml);

        }();

    </script>

</body>

</html>

注意一下ajax的配置参数：

        function fn1() {

            var model = {

                UserName: "admin",

                Password: "123456",

            };

            $.ajax({

                type: "POST",

                url: url + "/Login/VerifyLogin",

                data: model,

                dataType: 'json',

                xhrFields: {

                    withCredentials: true

                },

                crossDomain: true,

                success: function (response) {

                    console.log(response);//返回的内容

                }

            });

        }

后端主要代码：

 var Origin = filterContext.RequestContext.HttpContext.Request.Headers["Origin"];

 filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", Origin);

 filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Credentials", "true");

C# 跨域 请求带cookie的更多相关文章

  1. ajax跨域请求带cookie

    调用网站:a.xxx.com jQuery(document).ready(function () { $.ajax({ type: "get", async: true, url ...

  2. Ajax跨域请求附带Cookie/Ajax跨域请求附带身份凭证

    一.跨域请求中默认不带cookie等验证凭证 尤其对于post请求. 对于ajax请求,其中post,get都可以正常访问. withCredentials: false, // 允许携带cookie ...

  3. 【原】fetch跨域请求附带cookie（credentials）

    HTTP访问控制 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS 解决跨域的方式有很多种,本文介绍" ...

  4. 关于 Angular 跨域请求携带 Cookie 的问题

    在前端开发调试接口的时候都会遇到跨域请求的问题.传统的方式是使用 Nginx 反向代理解决跨域.比如所有接口都在 a.com 的域下,通过 Nginx 将所有请求代理到 a.com 的域下即可. 使用 ...

  5. 跨域请求携带cookie

      function ajaxPostRequestCipherMachine(url, param) { var url = url; var dict = { 'ret' : false, 'er ...

  6. 跨域请求传递Cookie问题

    问题描述 前后端完全分离的项目,前端使用Vue + axios,后端使用SpringMVC,容器为Tomcat. 使用CORS协议解决跨域访问数据限制的问题,但是发现客户端的Ajax请求不会自动带上服 ...

  7. asp.net web api 跨域，带cookie

    官网上有一个介绍 http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api 但是只支 ...

  8. jquery中$.get()如何让跨域请求携带cookie?

    在这个get请求前面加上这个就好了~~~~

  9. js跨域请求解决方案

    什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交 2.) 资源嵌入: <link>.&l ...

随机推荐

  1. GC收集器

    新生代收集器 Serial New 单线程收集器,工作时必须暂停其他线程: 简单高效,没有线程交互开销: 基于复制算法: Parallel New 对Serial的改进,多线程: CPU数量<4 ...

  2. python 多进程和协程配合使用

    一.需求分析 有一批key已经写入到3个txt文件中,每一个txt文件有30万行记录.现在需要读取这些txt文件,判断key是否在数据仓库中.(redis或者mysql) 为空的记录,需要写入到日志文 ...

  3. C#特性的学习（一）

    1.预定定义特性之一:AttributeUsage AttributeUsage有三个属性: 第一个属性:ValidOn 规定特性可被放置的语言元素,默认是AttributeTargets.All.

  4. Javascript实现的智能消防栓状态监测画面

    系统需要添加智能消防栓模块.集成了一家采用NbIOT通讯的智能消防栓产品.由第厂家平台对接NbIot特联网平台,我们平台提供一个api从第三方平台接收消防栓状态,用SignlaR把状态推送到前端.需要 ...

  5. Java开发环境搭建（二）：环境变量配置

    如果不配置环境变量,java 命令就只能在 bin 目录下才能使用,而且很多Java软件也需要在配置JAVA_HOME和PATH的状态下才能运行.为了在任何目录下都可以使用 java 命令.保证程序正 ...

  6. Linux定时清理日志脚本

    在应用疯狂打日志的情况下,服务器很容易被塞满磁盘. 先要写一个shell脚本,脚本如下. #!/bin/bash #----------------使用规范---------------- #1.该文 ...

  7. Flutter Image（图片）

    Image是一个用于展示图片的组件.支持 JPEG.PNG.GIF.Animated GIF.WebP.Animated WebP.BMP 和 WBMP 等格式. Image 有许多的静态函数: ne ...

  8. 浅谈ES6中super关键字

    作用: super 关键字用于访问父对象上的函数. 语法: super([arguments]); // 访问父对象上的构造函数 super.functionOnParent([arguments]) ...

  9. dede 对 单个 字段 编辑

    {dede:field.body runphp='yes'} $body = str_replace("src=\"/uploads","src=\" ...

  10. java8 lamb表达式对List排序

    场景一:List<Long> 或其他泛型,非对象 List<Long> ids = new ArrayList(); ids.add(100000001L); ids.add( ...