Angularjs之如何在跨域请求中传输Cookie的方法

一般情况我们在使用WebApi之类的技术时，都会遇到跨域的问题，这个只需要在服务端做一下处理即可。

如果这些GET或POST请求不需要传递Cookie数据的话，就没什么问题了，但如果需要，那么会发现 虽然已经处理了跨域请求的问题，但后台始终无法获取到Cookie。

跨域传输Cookie是需要后台和前台同时做相关处理才能解决的。

就好比一个握手会话，前台先表示，我的跨域请求是带有Cookie的；请求到了服务端，服务端表示可以接收跨域Cookie，成交（开始重新带着Cookie发起请求）

后台代码

Response.Headers.Add("Access-Control-Allow-Credentials", "true");

前台代码

$http.post("http://a.domain.com/Api/Product", { productId: 3 }, {
  withCredentials: true,
  params: { name: "Ray" },
  headers: {'Authorization':"这个不重要"}
}).success(function (data) {
  //TODO
});

这个是在单独的请求中设置，如果要在所有的请求中都应用该设置则要使用 $httpProvider

angular.module("app").config(function ($httpProvider) {
  $httpProvider.defaults.withCredentials = true;
  $httpProvider.defaults.headers.common['Authorization'] = "89757";
})

如果使用jQuery，则是这样子的

$.ajax({
  type: "POST",
  url: "http://a.domain.com/Api/Product",
  xhrFields: {
    withCredentials: true
  },
  success: function (data) {
    console.log(data)
  },
  error: function (data) {
    console.error(data)
  }
})

撇开Cookie跨域传输的问题，angularjs的跨域POST请求与jQuery有些区别：

jQuery跨域与本域的区别仅仅是请求头信息的变化；

angularjs跨域后，会变成两次请求，第一次的Request Method是OPTIONS，这里有个概念叫preflight，这里不谈。

第一次请求到服务器后，会针对请求的下面三项进行赋值

  1. Access-Control-Allow-Origin
  2. Access-Control-Allow-Methods
  3. Access-Control-Allow-Headers"

浏览器接收到返回信息后，会再次发送请求，这次的Request Method是POST，这回就跟普通本域请求一样了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Angular.js与node.js项目里用cookie校验账户登录详解

    Angular.js与node.js项目里用cookie校验账户登录详解

    前言 最近的新项目中,用户登录需要采用cookie来记住用户,校验身份.所以本文就把实现的过程总结出来分享给大家,需要的朋友们可以参考学习. 在header中携带authId登录 在之前老的项目里,没有采用cookie来记录用户登录状态,而是在请求的header中携带一个身份标识来校验,大致方案如下: 客户端使用post请求提交user.password给服务端进行登录操作: 服务端校验用户是否合法,如果合法将产生一个唯一的身份标识authId,返回给客户端,客户端将此authId存放本地(如l

  • AngularJS入门教程之Cookies读写操作示例

    AngularJS入门教程之Cookies读写操作示例

    本文实例讲述了AngularJS的Cookies读写操作.分享给大家供大家参考,具体如下: 虽然使用JavaScript创建和获取Cookie很简单,AngularJS还是把它作为一个单独的模块进行了封装,模块名为ngCookies,和前面的教程中做法一样,先引入angular-cookies.js: <script type="text/javascript" src="angular-1.3.0.14/angular-cookies.js"><

  • Angularjs cookie 操作实例详解

    Angularjs cookie 操作实例详解

    摘要 现在很多app采用内嵌h5的方式进行开发,有些数据会存在webveiw的cookie中,那么如果使用angularjs开发单页应用,就需要用到angularjs的cookie操作.这里提供一个简单的学习demo.方便快速上手. 一个例子 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="myapp"> <head> <meta http

  • Angular ng-animate和ng-cookies用法详解

    Angular ng-animate和ng-cookies用法详解

    ng-animate 本文讲一下Angular中动画应用的部分. 首先,Angular本生不提供动画机制,需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制,Angular也不提供具体的动画样式,所以说,它的自由度和可定制性挺大的. 那么,刚开始需要在项目的入口html文件中引入Angular框架(angular.js),然后引入angular.animate.js. 在项目的js入口文件app.js中,新建项目模块,并且添加所依赖的模块ng-Animate

  • angular中的cookie读写方法

    AngularJS中对cookie的操作封装了一个单独的模块,模块名为ngCookies,若想使用需在页面中先引入angular-cookies.js: <script src="js/angular.min.js"></script> <script src="js/angular-cookies.js"></script> 然后將ngCookies模块注入到我们自定义的模块的依赖模块中: var app = ang

  • Angularjs之如何在跨域请求中传输Cookie的方法

    一般情况我们在使用WebApi之类的技术时,都会遇到跨域的问题,这个只需要在服务端做一下处理即可. 如果这些GET或POST请求不需要传递Cookie数据的话,就没什么问题了,但如果需要,那么会发现 虽然已经处理了跨域请求的问题,但后台始终无法获取到Cookie. 跨域传输Cookie是需要后台和前台同时做相关处理才能解决的. 就好比一个握手会话,前台先表示,我的跨域请求是带有Cookie的:请求到了服务端,服务端表示可以接收跨域Cookie,成交(开始重新带着Cookie发起请求) 后台代码

  • 详解javascript如何在跨域请求中携带cookie

    详解javascript如何在跨域请求中携带cookie

    目录 1.搭建环境 2.测试同源cookie 3.跨域请求携带cookie 4.总结 5.知识点 1. 搭建环境 1.生成工程文件 npm init 2.安装 express npm i express --save 3.新增app1.js,开启服务器1 端口:3001 const express = require('express') const app = express() const port = 3001 // 设置`cookie` app.get("/login", (r

  • AJAX跨域请求数据的四种方法(实例讲解)

    由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据 请求数据需要调用浏览器的内置构造函数 XMLHttpRequest() 进行 实例对象 var xhr = new XMLHttpRequest(); 注意点 在IE8之前支持的 ActiveXobject("Microsoft.XMLHTTP");  记住要进行兼容处理哦  在这里我就不写了 通过该对象进行获取 获取数据的四种状态  xhr.readyState 该属性保存着请求数据的几种状态 1.xhr.open(请

  • Node.js设置CORS跨域请求中多域名白名单的方法

    CORS 说到CORS,相信前端儿都不陌生,这里我就不多说了,具体可以看看这篇文章. CORS,主要就是配置Response响应头中的 Access-Control-Allow-Origin 属性为你允许该接口访问的域名.最常见的设置是: res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Credentials', 'true'); // 允许服务器端发送Cookie数据 然而,这样的

  • AJAX跨域请求json数据的实现方法

    我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果. 让我们看看JSONP的是怎么在jQuery,MooTools的,Dojo Toolkit中实现的. jQuery的JSONPjQuery.getJSON方法: Js代码 复制代码 代码如下: jQuery.getJSON("http://search.twitter.

  • 详解js跨域请求的两种方式，支持post请求

    JSONP实现跨域 常用的jquery实现跨域调用 $.ajax({ url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php", dataType: "jsonp", jsonp: "callback", context: document.body, success: function(data) { console.log(data); } }); 这个调用实际上

  • 原生JS实现ajax与ajax的跨域请求实例

    一.原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要传递数据发送null 第五步:在监听函数中,判断readyState=4&&status=200表示请求成功 第六步:使用responseText.responseXML接受响应数据,并使用原生JS操作DOM进行显示 var ajax = new XMLHttpRequest(); ajax.

  • Django跨域请求问题的解决方法示例

    前言 本文主要给大家介绍了关于Django跨域请求问题解决的几种方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 几种方法: 使用django-cors-headers全局控制 使用JsonP,只能用于Get方法 在views.py里设置响应头,只能控制单个接口 django-cors-headers 首先安装 pip install django-cors-headers 然后在settings.py里配置一番就可以 INSTALLED_APPS = [ ... 'cor

  • springboot 跨域配置类及跨域请求配置

    下面通过代码看下springboot 跨域配置类,代码如下所示: ackage org.fh.config; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.servlet.ServletRe

  • 探秘ajax跨域请求

    探秘ajax跨域请求

    前言 ajax,用苍白的话赞扬:很好. 我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验:我们可以使用ajax实现小系统组合大系统:我们还可以使用ajax实现前端的优化.(好一个排比) 虽然ajax很好,但在使用起来也会有一定的限制,出于安全考虑,不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.(下面例子1可以直观看出) 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面

随机推荐