几乎每种浏览器都存在默认的安全机制,都有同源策略,因为浏览器恶意的把每个外部请求的都当做是黑客攻击,相当于是对自身的保护,所以浏览器在运行脚本时会判断脚本与请求的页面是否是同一来源,这个同一来源,包括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. windows常用快捷键

    windows常用快捷键 Fn+F1:Windows的支持和帮助 =Windows 徽标+F1 Fn+F2:重命名对象 Fn+F3:查找所有文件 Fn+F4:选择“转到不同的文件夹”框并沿框中的项向下 ...

  2. 14 Generator

    Generator 就是可以返回多个结果,也是支持 Iterator 接口. function* helloWorldGenerator() { yield 'hello'; yield 'world ...

  3. 移动端阻止body滚动

    一些移动设备有缺省的touchmove行为,比如说经典的iOS overscroll效果,当滚动超出了内容的界限时就引发视图反弹 阻止滚动: css: body{ height:100%; overf ...

  4. jvascript 顺序查找和二分查找法

    第一种:顺序查找法 中心思想:和数组中的值逐个比对! /* * 参数说明: * array:传入数组 * findVal:传入需要查找的数 */ function Orderseach(array,f ...

  5. System.Web.Http.Cors配置跨域访问的两种方式

    System.Web.Http.Cors配置跨域访问的两种方式 使用System.Web.Http.Cors配置跨域访问,众多大神已经发布了很多文章,我就不在详细描述了,作为小白我只说一下自己的使用心 ...

  6. 网站设置404页面 --nginx

    有的时候根据域名要先知道用的什么web 服务器 最简单的 http://tool.chinaz.com/pagestatus/  输入域名,看返回的头部信息 用的那个web浏览器 下面的方法也是根据头 ...

  7. 顶级域名和二级域名cookie共享删除和修改

    原文地址: https://segmentfault.com/a/1190000006932934

  8. Could not find or load main class org.gradle.wrapper.GradleWrapperMain解决办法

    解决办法: gradlew is the gradle wrapper executable - batch script on windows and shell script elsewhere. ...

  9. JQuery radio(单选按钮)操作方法汇总

    这篇文章主要介绍了JQuery radio(单选按钮)操作方法汇总,本文讲解了获取选中值.设置选中值.根据Value值设置选中.删除Radio.遍历等内容,需要的朋友可以参考下   随着Jquery的 ...

  10. MySQLdb的一些经验

    遇到过的几类问题: 如果保持长连接,即使在mysql数据库默认的connection timeout内,也有可能出现"mysql server has gone away".还有另 ...