原文：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. prometheus+alertmanager+granafa监控总结,安装基于docker-compose(长期更新)

    最近自己个人尝试在使用prometheus+grafana监控工作业务上的指标, 但是报警功能还没有实际用上,但是感觉是很好用,写下一些啃prometheus官网文档并且自己用到的一些配置的总结,后续 ...

  2. es6新特性-解构表达式、Lambda表达式、局部变量及map/reduce方法

    循环内的变量在循环外可见,不合理: let定义的变量是局部变量: const修饰的是常量,不允许再次修改,类似于java中的static: 解构表达式:

  3. golang ---调用window api函数执行程序

    package main import "syscall" import "unsafe" func main() { var hand uintptr = u ...

  4. .net语音播放，自定义播报文字

    // using System.Speech.Synthesis; SpeechSynthesizer synth = new SpeechSynthesizer(); // Configure th ...

  5. [jsp学习笔记] jsp基础知识 数据初始化、同步

  6. Java文件字符流

    1.字符编码(Character encoding)和编码集(Character set) 字符编码(Character encoding)是将字符转为字节或字节数组的过程. 字符集(Characte ...

  7. js(es6)数组去重

    // 利用set.reduce.filter去重 // Set function getSetArr(arr) { return [...new Set(arr)] } console.log(get ...

  8. FreeRTOS任务状态信息查询

    uxTaskPriorityGet():查询某个任务的优先级 vTaskPrioritySet():改变某个任务的任务优先级 uxTaskGetSystemState():获取系统中任务状态 vTas ...

  9. Android应用通过JDBC直连阿里云MySQL数据库

    1.设置白名单,获取外网连接地址 外部设备要访问阿里云MySQL数据库,则需要设置白名单,具体操作链接: https://help.aliyun.com/document_detail/43185.h ...

  10. 听说你知道什么是锁 --JAVA

    I.java中的锁 1.1 什么是锁 ​ 在计算机科学中,锁(lock)与互斥(mutex)是一种同步机制,用于在许多线程执行时对资源的限制. ​ 锁通常需要硬件支持才可以有效实施.这种支持通常采用一 ...