AJAX跨域
AJAX跨域
AJAX不允许跨域访问。
跨域是指浏览器B显示的是服务器S1的数据,全是从S1取得的数据则是同域;但如果B显示的S1上的数据的某个比如img是从S2上取得的数据,则是跨域。端口不一样也是跨域。跨域不仅是跨服务器,还是跨IP,跨端口。
AJAX通过三种方法,可以解决跨域问题。
1、设置请求头,每一个路径里都要设置,可以封装成方法方便调用。
res.setHeader("Access-Control-Allow-Origin","*");
res.setHeader("Access-Control-Allow-Methods","GET,POST");
3000服务器请求跨域到3001,需要在3001里改写代码
2、设置代理
3、JSONP 即JSON with padding,script的src可以提交服务器。本质上jsonp不是AJAX,是采用script绕过了AJAX的跨域问题。
3001的路由表中,写:
router.get('/jsonp',function(req,res){
res.send("callback('ajax的跨域访问')");
}); //这种方法只能get提交
在3000的html中输入:
$("img").click(function(){
$("body").append("<script src='http=//localhost:3001/users/jsonp'><\/script>"); //<\/script>里的\是转义符
});
用ajax实现jsonp
$.ajax({
type:"get,
url:"http://localhost:3001/users/jsonp",
data:{username:"abcabc"},
dataType:"jsonp",
success:function(data){
console.log(data);
}
});
3001的路由表中,写:
router.get('/jsonp',function(req,res){
res.jsonp("ajax的跨域访问");
});
AJAX跨域的更多相关文章
- Laravel中的ajax跨域请求
最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...
- Ajax操作如何实现跨域请求 (JSONP和CORS实现Ajax跨域的原理)
由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...
- Ajax跨域问题的两种解决方法
浏览器不允许Ajax跨站请求,所以存在Ajax跨域问题,目前主要有两种办法解决. 1.在请求页面上使用Access-Control-Allow-Origin标头. 使用如下标头可以接受全部网站请求: ...
- 浅谈linux 下,利用Nginx服务器代理实现ajax跨域请求。
ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...
- 解决ajax跨域请求 (总结)
ajax跨域请求,目前已用几种方法实现: 1)用原生js的xhr对象实现. var url="http://freegeoip.net/json/" ...
- Ajax跨域访问wcf服务中所遇到的问题总结。
工具说明:vs2012,sql server 2008R2 1.首先,通过vs2012建立一个wcf服务项目,建立好之后.再新开一个vs2012 建立web项目,通过jQuery的ajax方法访问服务 ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- Ajax跨域:Jsonp原理解析
推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...
- jquery ajax跨域调用
客户端: //ajax跨域调用的方法 $.ajax({ url:dustUrl+"/screenshot/getDevices.do", type: "get" ...
- 浅析JSONP-解决Ajax跨域访问问题
浅析JSONP-解决Ajax跨域访问问题 很久没有写随笔了,总是感觉没时间,其实时间就是...废话少说,前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现 ...
随机推荐
- 一款新的PYTHON数据科学利器:yhat
偶然看文章发现的一个新的python IDE,外表很清新,也很新颖. https://www.yhat.com/products/rodeo 看图说话,软件的布局确实很新颖,和Notebook类似,也 ...
- Linux学习 :中断处理机制 & poll机制
中断是指在CPU正常运行期间,由于内外部事件或由程序预先安排的事件引起的CPU暂时停止正在运行的程序,转而为该内部或外部事件或预先安排的事件服务 的程序中去,服务完毕后再返回去继续运行被暂时中断的程序 ...
- nginx url重定向
nginx内部支持url rewrite,内部编译进去了rewrite模块,nginx的rewrite模块类似于apache的rewriterule功能:支持多种规则和正则表达式: 详细介绍如下: N ...
- SharePoint SC "Audit Settings"功能与CSOM的对应
博客地址:http://blog.csdn.net/FoxDave SharePoint网站集中有个关于审计的功能:"Site collection audit settings&quo ...
- freeCAD预选项编辑器
freeCAD的预选项系统在 Edit 目录 -> Preferences. freecad的功能分成不同的模块,每一模块负责一个特定的工作台工作.freecad还使用了一个概念叫晚加载,这意味 ...
- Android --差缺补漏之 Intent&putExtra()
伴随着Android Developers 的开发,再也不用FQ了,这意味着Android 对中国学习者有着越来越多的官方学习资料,学习起来有更明确的方向和目标. Android Developer ...
- html5/css学习笔记
请始终将正斜杠添加到子文件夹.假如这样书写链接:href="http://www.w3cschool.cc/html",就会向服务器产生两次 HTTP 请求.这是因为服务器会添加正 ...
- Spring学习笔记(一)
1.1.1Spring是什么? Spring是一个开源的轻量级Java SE(Java 标准版本)/Java EE(Java 企业版本)开发应用框架,其目的是用于简化企业级应用程序开发. 1.1.2S ...
- WebView---Android与js交互实例
Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true 原文地址:http://blog.csdn.net/it10 ...
- ViewPager实现自动翻页功能 --转载出处找不到了,根据自己的理解写个随笔方便以后的记忆以及代码的共享,感谢给我启发的那位高手--第一次写博客哈
xml文件 textview 用于显示图片的标题 viewpager 用于实现翻页效果 <LinearLayout xmlns:android="http://schemas.andr ...