原文：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. Java date日期类型，结束日期减去开始日期求两者时间差，精确到秒

    /** * @Author: * @Description: * @Date: 2019/4/10 19:01 * @Modified By: */ @Slf4j public class DateU ...

  2. centos7 设置静态ip , 并开机联网

    修改 /etc/sysconfig/network-scripts 下的文件 我的是ens32 (不同系统这个文件名字不一样) 内容如下 TYPE=Ethernet PROXY_METHOD=none ...

  3. UI测试用例设计，场景测试法

    百度一番,没有发现详细的UI测试用例设计方法,只能自己整理一下,学习.改进. 那么正题来了,我们慢慢缕下思路: 1.整理要测实体中的,处理逻辑.触发规则.动作. 2.将场景测试抽象出来 3.到这个时候 ...

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

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

  5. ConsoleLoggerExtensions.AddConsole(ILoggerFactory)已过时代码修复

    0x00.问题 netcoreapp2.2环境下, Startup.cs 代码配置如下 public void Configure(IApplicationBuilder app, IHostingE ...

  6. 试用一款网荐的 iOS 快速布局UI库

      NerdyUI github: https://github.com/nerdycat/NerdyUI Cupcake (Swift 版本) github: https://github.com/ ...

  7. Android 低功耗蓝牙BLE 开发注意事项

    基本概念和问题 1.蓝牙设计范式? 当手机通过扫描低功耗蓝牙设备并连接上后,手机与蓝牙设备构成了客户端-服务端架构.手机通过连接蓝牙设备,可以读取蓝牙设备上的信息.手机就是客户端,蓝牙设备是服务端. ...

  8. 过滤器+用session验证是否登陆过

    过滤器: public class MyActionFilter : ActionFilterAttribute//继承ActionFilterAttribute类 { public override ...

  9. Linux环境变量$PATH

    3. 使用env命令显示所有的环境变量 # env HOSTNAME=redbooks.safe.org PVM_RSH=/usr/bin/rsh Shell=/bin/bash TERM=xterm ...

  10. 1、[python] PyMouse、PyKeyboard用python操作鼠标和键盘

    [python] PyMouse.PyKeyboard用python操作鼠标和键盘 1.PyUserInput 简介 PyUserInput是一个使用python的跨平台的操作鼠标和键盘的模块,非常方 ...