几乎每种浏览器都存在默认的安全机制,都有同源策略,因为浏览器恶意的把每个外部请求的都当做是黑客攻击,相当于是对自身的保护,所以浏览器在运行脚本时会判断脚本与请求的页面是否是同一来源,这个同一来源,包括1、协议,2、地址,3、端口,只有三者都相同才被认为是同一来源。

解决方案:1,在服务器端的响应头中添加一个http参数:
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
用于告诉客户端可以访问这个跨域的资源,但是问题又来了,知道HTTP协议的同学都清楚,http是一种无状态的基于请求响应的协议,每次的请求都是全新的,服务器无法保持状态,这时我们可以利用服务器的session机制:
session是服务器的一个内存空间,当一个客户端访问服务器时,服务器会为这个客户端创建一个唯一
的空间,并且给定一个编号,这个编号就是sessionid,在响应客户端时,在响应头中加入了cookie.sessionid=xxxx,将这个cookie响应给客户端,当这个客户端下一次请求服务器时,客户端会自动将cookie写到请求头中发送给
给服务器,,服务器接受到这个请求之后,从请求头中取出这个sessionid,这样就可以判断是哪一个用户了。但是,问题又来了,如果出现跨域,服务器响应时写了res.setHeader("Access-Control-Allow-Origin", "*");,
客户端就会忽略本地的cookie,从而向服务器发送请求时不再发送cookie,这个服务器找不到cooie,就会认为你是个新用户,哪怕你已经请求过N次。 解决方案:JSONP 原理:Web页面上调用js文件时则不受是否跨域的影响(不仅如此,凡是拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>);
所以,我们可以这样做,在客户端声明一个处理json的函数,这个函数作为参数传给服务器,由服务器调用服务器生成动态的调用代码,并且把想要传给客户端的json数据作为实参注入)
jQuery已经为我们做好了一切,我们只需调用即可
例如:
客户端代码:
$.ajax({
type: "GET",
url: "服务器处理地址",
dataType:"jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"handle",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success: function( data){
alert( 'helloworl '+ data.count );
} ,
error: function(msg){
alert( msg);
}
}); //回调函数,由服务器端调用的函数
function handle( jsonResult ){
//处理
} 服务器代码:
//先取得传过来的回调函数名
var cb=request.callback; //要传送给客户端的 json数据
var jsonobj=xxx res.send("("+jsonobj+");");//即生成类似于 handle(jsonobj); 后发送给客户端

Ajax请求跨域问题 -- 转载的更多相关文章

  1. day78_淘淘商城项目_11_单点登录系统实现 + 用户名回显 + ajax请求跨域问题详解_匠心笔记

    课程计划 1.SSO注册功能实现 2.SSO登录功能实现 3.通过token获得用户信息 4.ajax跨域请求解决方案--jsonp 1.服务接口实现   SSO系统就是解决分布式环境下登录问题的,本 ...

  2. 解决ajax请求跨域

    跨域大部分需要通过后台解决,引起跨域的原因: 3个问题同时满足 才可能产生跨域问题,即跨域(协议,主机名,端口号中有一个不同就产生跨域) 下面是解决方法 方法一 // ajax请求跨域 /* *解决a ...

  3. 解决Ajax请求跨域问题

    from:https://blog.csdn.net/wang379275614/article/details/53333775 上篇文章提到,由于浏览器的同源策略,使得,AJAX请求只能发给同源的 ...

  4. 处理Ajax请求跨域问题

    ajax跨域的原理 ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”. CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resourc ...

  5. 关于ajax请求跨域问题

    jQuery中的异步请求跨域的方法: xhrFields: {withCredentials: true} 当设置为  true时,表示允许跨域: false时,表示禁止跨域

  6. ajax请求跨域问题

    ajax跨域,这个是面试的时候常被问到,也是在做项目的时候会遇到的问题,在之前的项目中就有遇到过,这里根据经验写了三种分享下 1.使用中间层过渡的方式 简单来说就是"后台代理",把 ...

  7. web api 解决Ajax请求跨域问题

    前端ajax请求接口时,经常出现跨域问题,当然了解决方法有很多种,比如: http://www.jb51.net/article/68424.htm 我本人恰好前后端都会一点,所以直接在接口端处理. ...

  8. WebApp开发:ajax请求跨域问题的解决

    服务端:PHP 客户端:Andorid, HTML5, jQuery, ajax 现象:本想通过jQuery的ajax功能从服务器取回数据存到手机的缓存里,结果总是错误,后来想到可能是跨域问题,所以查 ...

  9. nginx配置 解决ajax请求跨域问题

    文章来源:http://to-u.xyz/2016/06/30/nginx-cors/ 背景描述 最近在研究RESTful API接口设计,使用的是Nginx,要实现本地http://127.0.0. ...

随机推荐

  1. MySQL二进制日志

    一.二进制日志(The Binary Log) 1.简介 包含所有更新了的数据或者已经潜在更新了的数据(比如一条没有匹配任何行的delete语句) 包含所有更新语句执行时间的信息 不记录没有修改数据的 ...

  2. Python学习总结 01 配置环境

    1 查看python的版本 ubuntu16.04 LTS系统下默认安装了python2.7.12 和python3.5.2, 她们在/usr/bin/下可以找到, 默认用python2.7.8 1) ...

  3. linux 星际词霸安装

    安装StarDict星际译王.这是linux系统中最常用的翻译软件之一,但好久没有更新了.Ubuntu14.04下直接在ubuntu软件中心中搜索stardict即可图形界面安装. 命令行安装:sud ...

  4. UI

    http://semantic-ui.com/introduction/getting-started.html

  5. 室内定位系列(二)——仿真获取RSS数据

    很多情况下大家都采用实际测量的数据进行定位算法的性能分析和验证,但是实际测量的工作量太大.数据不全面.灵活性较小,采用仿真的方法获取RSS数据是另一种可供选择的方式.本文介绍射线跟踪技术的基本原理,以 ...

  6. MATLAB读取一张RGB图片转成YUV格式

    1.读入照片 控制输出的标志定义 clc;close all;clear YES = 1; NO = 0; %YES表示输出该文件,请用户配置 yuv444_out_txt = 1; yuv444_o ...

  7. 的vim和emacs常用配置记录

    因为经常改变工作环境,所以在这里记录一下我的.vimrc文件和.emacs文件的内容. vimrc的配置文件,主要是设置语法高亮,和tab键的宽度,个人喜欢设置为4个空格的分量. " set ...

  8. web app开发技巧总结 (share)

    (转自http://hi.baidu.com/kuntakinte/item/ca92d6e5edae9fc0bbf37d08) 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联 ...

  9. mysql基于“时间”的盲注

    无需页面报错,根据页面响应时间做判断! mysql基于时间的盲注 =================================================================== ...

  10. iOS-关于使用其他应用打开本应用文档

    简介:本片文章是对官方文档的翻译,非常的感谢文章的翻译者:颐和园 官方地址:Document Interaction Programming Topics for iOS 文章的介绍内容: ***** ...