ajax跨域调试和cookie问题

在之前项目中,web前端ajax的跨域访问api接口都是通过设置Data-type="jsonp"来解决的。 
新项目中为了安全起见,把用户敏感信息和api接口验证都放在HttpRequest Header的Authorization中, 
但是发现一个蛋疼的问题,使用Data-type="jsonp"来进行跨域访问,Header中Authorization的内容无法发送出去。 
为了解决这个问题只能使用Data-type="json",并在本地用nginx搭建一个反向代理来解决跨域访问问题。 
1.修改本地的host地址,定义一个"api.com"的域名指向127.0.0.1如下: 
127.0.0.1 api.com 
2.使用api.com来访问api接口,api.com/web/来访问本地网页端。nginx方向代理设置如下: 
location /web { 
#指向本地web访问目录 
proxy_pass http://127.0.0.1:8080$request_uri; 
}

location / { 
#指向远程api访问url 
proxy_pass http://192.168.1.211:8080$request_uri;

这样解决了跨域访问问题,在项目后续开发中,还是发现一个问题。服务器端向response中写入的cookie,本地无法保存,以至于服务器在验证权限的时候,无法获得相应的cookie。 
研究发现在跨域访问时,服务器写入的cooki其实写入到211路径或者域下面,而本地调试api时使用的是api.com这个域。解决这个问题也很简单,在设置代理服务器时指定cooki的domain,如下: 
location / { 
proxy_pass_header Set-Cookie; 
proxy_set_header Cookie $http_cookie; 
#远程服务器下的cookie写入到api.com下面 
proxy_cookie_domain 192.168.1.211 api.com;
#指向远程api访问url 
proxy_pass http://192.168.1.211:8080$request_uri;

这样圆满解决问题,在此MARK一下。

时间: 2024-08-06 15:36:40

ajax跨域调试和cookie问题的相关文章

ajax 跨域无法携带cookie 解决办法

ajax 跨域无法携带cookie,需要用到session,终于完美结局 xhrFields: { withCredentials: true }, 添加这个可能是大家都会做的一件事 但是添加上了之后就出现了另外一个问题 The 'Access-Control-Allow-Origin' header contains the invalid value 'Origin'. Origin ...... 2.服务器server端要配置Access-Control-Allow-Credentials

ajax跨域请求带cookie

调用网站:a.xxx.com jQuery(document).ready(function () { $.ajax({ type: "get", async: true, url: "http://www.xxx.com/common/Index", //跨域请求的URL dataType: "html", xhrFields: { withCredentials: true }, crossDomain: true, success: fun

Chrome浏览器开启Ajax跨域访问调试

由于浏览器安全性限制,Ajax是不能跨域访问的,而我们在日常开发工作中,经常会出现本地开发环境需要访问其他服务器上的API情况.提示信息为: Access to XMLHttpRequest at 'http://****' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 在当今前后端分

ajax 跨域----好用的解决方案

一.前言 跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了! 但是感觉还是差了点什么,于是现在重新梳理了一下.个人见识有限,如有差错,请多多见谅 二.前言 关于跨域,有N种类型,本文只专注于 ajax请求跨域(ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨域等这里不做介绍),内容大概如下: 什么是ajax跨域 原理 表现(整理了一些遇到的问题以及解决方案) 如何解决ajax跨

ajax跨域,这应该是最全的解决方案了

前言 从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于是现在重新梳理了一下. 个人见识有限,如有差错,请多多见谅,欢迎提出issue,另外看到这个标题,请勿喷~ 题纲 关于跨域,有N种类型,本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨域等这里不做介绍),内容大概如下

jquery ajax跨域的完美解决方法(jsonp方式)

ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquer

Ajax跨域访问wcf服务中所遇到的问题总结。

工具说明:vs2012,sql server 2008R2 1.首先,通过vs2012建立一个wcf服务项目,建立好之后.再新开一个vs2012 建立web项目,通过jQuery的ajax方法访问服务. 问题:由于web项目和wcf服务,不在同一个端口之中,所以涉及到“跨域”的问题.跨域访问的时候,需要对服务的接口和方法做一定的限定.具体参考:http://www.cnblogs.com/yangbingqi/p/2096197.html 2.解决了跨域问题,我们需要把服务部署到IIS.vs20

AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法?

ajax是异步的 JavaScript 和 XML.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 交互流程: 1--启动  获取XMlHttpRequest对象             2--open 打开url通道,并设置异步传输              3--send 发送数据到服务器             4--服务器接受数据并处理,处理完成后返回结果              5--客户端接收

浅析JSONP-解决Ajax跨域访问问题

浅析JSONP-解决Ajax跨域访问问题 很久没有写随笔了,总是感觉没时间,其实时间就是...废话少说,前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaSc