跨域

跨域有三个条件，满足任何一个条件就是跨域
 1：服务器端口不一致
 2：协议不一致
 3：域名不一致

解决方案：

1.jsonp

　　在远程服务器上设法动态的把数据装进js格式的文本代码段中，供客户端调用和进一步处理；在前台通过动态添加script标签及src属性，表面看上去与ajax极为相似，但是，这和ajax并没有任何关系；为了便于使用及交流，逐渐形成了一中非正式传输协议，人们把它称作 jsonp 。

代码如下：

html：

<body>
<form action="/" method="post" enctype="multipart/form-data">
<input type="text" name="xinxi" id="info"><br>
<input type="file" name="file" id="file"><br>
<input type="button" value="提交" name="submit" id="btn">
</form>
</body>
<script src="./jquery.js"></script>
<script>
//提前写好函数，调用函数需要传参
function callback(data){
alert(data);
}
//动态添加script标签及src属性
$('#btn').on('click',function(){
var sc = document.createElement('script');
sc.src = 'http://soul:8888/kuayu?cb=callback';
$('head').append(sc);
})
</script>　　

js：

 var http = require('http');

 var url = require('url');

 var server = http.createServer();

 server.listen('8888',function(){

     console.log('8888');

 });

 server.on('request',function(req,res){

     var urls = url.parse(req.url,true);

     if(urls.pathname == '/kuayu'){

         res.end('callback("jsonp")');//返回的数据需是前端定义的函数调用的形式

     }

 });

运行结果：

 总结一下：

　　jsonp的一个要点就是允许用户传递一个callback参数给服务端， 然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据， 这样客户端就可以随意定制自己的函数来自动处理返回数据了。

　　发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如script、img、iframe； src 的能力就是把远程的数据资源加载到本地(图片、JS代码等);

2.cors

cors跨域的核心点是在服务端代码中设置一个响应头即可

res.setHeader('Access-Control-Allow-Origin','*');

html：

<body>

    <form action="/" method="post" enctype="multipart/form-data" id="form">

        <input type="text" name="xinxi" id="info"><br>

        <input type="button" value="提交" name="submit" id="btn">

    </form>

</body>

<script src="./jquery.js"></script>

<script>

    $('#btn').on('click', function () {

                $.ajax({

                        url: 'http://soul:8888/kuayu',

                        type:'delete',

                        async:false,

                        success: function (data) {

                            alert(data);

                        },

                })

    })

</script>

js代码：

var http = require('http');

var url = require('url');

var server = http.createServer();

server.listen('8888',function(){

    console.log('8888');

});

server.on('request',function(req,res){

　　　　// 允许所有请求域
　　　　// res.setHeader('Access-Control-Allow-Origin','*');
　　　　// 只允许具体的一个域进行数据共享
　　　　// res.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:8000');

　　 var urls = url.parse(req.url,true);

    res.setHeader('Access-Control-Allow-Origin','*');

    if(req.method == 'POST' || req.method == 'GET'){

        if(urls.pathname == '/kuayu'){

            res.end('hello,world');

        }
　　　　// 客户端发送预先检查请求，响应会客户端，

    }else if(req.method == 'OPTIONS'){

        res.setHeader('Access-Control-Allow-Methods', 'DELETE');//设置所允许的真是请求（delete，put等）

        res.end('');
　　// 客户端发送真实请求，响应数据

    }else if(req.method == 'DELETE'){

        res.end('Bye');

    }

});

效果：

　　　很多人也认为使用CORS解决跨域很简单，只需要在服务器添加响应头 “ Access-Control-Allow-Origin ：* ” 就可以了，

其实不然，因为在CORS中，所有的跨域请求被分为了两种类型，一种是简单请求，一种是复杂请求 (严格来说应该叫‘需预检请求’)；简单请求与普通的ajax请求无异；但复杂请求，必须在正式发送请求前先发送一个OPTIONS方法的请求已得到服务器的同意，若没有得到服务器的同意，浏览器不会发送正式请求；

满足以下所有条件，被视为简单类型的请求：

1：请求方法必须是 GET、HEAD、POST中的一种，其他方法不行；

2：请求头类型只能是 Accept、Accept-Language、Content-Language、Content-Type，添加其他额外请求头不行；

3：请求头 Content-Type 如果有，值只能是 text/plain、multipart/form-data、application/x-www-form-urlencoded 中的一种，其他值不行；

4：请求中的任意 XMLHttpRequestUpload  对象均没有注册任何事件监听器；

5：请求中没有使用 ReadableStream 对象。（以上摘自西岭老湿微信公众号）

总结一下：

如果请求方式为get和post简单请求，则只需要设置响应头：res.setHeader('Access-Control-Allow-Origin','*');来允许某一个域 或者 所有域进行数据共享；

若是其他方式的请求，会在发送真正的请求之前发送一个options请求，通过options请求里设置：res.setHeader('Access-Control-Allow-Methods', 'DELETE')，

告知服务器正式请求会使用哪一种 HTTP 请求方法。

 

ajax跨域问题解决方案（jsonp，cors）的更多相关文章

  1. PHP下ajax跨域的解决方案之CORS

    由于安全的限制(同源策略,javascript只能访问同域名下的内容),如果需要进行跨域操作,那就免不了要进行跨域.   CORS(跨域资源共享,Cross-Origin Resource Shari ...

  2. AJAX跨域调用相关知识-CORS和JSONP（引）

    AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常 ...

  3. C#进阶系列——WebApi 跨域问题解决方案：CORS

    前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看WebAPI的另一个常见问题:跨域问题.本篇主要从实例的角度分享下CORS解决跨域问题一些细节. WebApi系列文章 C#进阶系列— ...

  4. C#进阶系列——WebApi 跨域问题解决方案：CORS(转载)

    C#进阶系列——WebApi 跨域问题解决方案:CORS   阅读目录 一.跨域问题的由来 二.跨域问题解决原理 三.跨域问题解决细节 1.场景描述 2.场景测试 四.总结 正文 前言:上篇总结了下W ...

  5. 跨域学习笔记2--WebApi 跨域问题解决方案：CORS

    自己并不懂,在此先记录下来,留待以后学习... 正文 前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看WebAPI的另一个常见问题:跨域问题.本篇主要从实例的角度分享下CORS解决跨 ...

  6. JAVAEE——宜立方商城11：sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求（jsonp）

    1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...

  7. ajax跨域请求解决方案 CORS和JSONP

    什么是跨域: 只要协议.域名.端口有任何一个不同,都会被当成不同的域.而由于浏览器的同源策略(同源策略:域名.协议.端口均相同),浏览器之间要隔离不同域的内容,禁止互相操作,不能执行其他网站的js.所 ...

  8. 再也不学AJAX了！（三）跨域获取资源 ② - JSONP & CORS

    浏览器的"同源策略"固然保障了互联网世界的数据隐私与数据安全,但是如果当我们需要使用AJAX跨域请求资源时,"同源策略"又会成为开发者的阻碍.在本文中,我们会简 ...

  9. java、ajax 跨域请求解决方案（'Access-Control-Allow-Origin' header is present on the requested resource. Origin '请求源' is therefore not allowed access.）

      1.情景展示 ajax调取java服务器请求报错 报错信息如下: 'Access-Control-Allow-Origin' header is present on the requested ...

  10. WebApi 跨域问题解决方案：CORS

    注:本文为个人学习摘录,原文地址:http://www.cnblogs.com/landeanfen/p/5177176.html 前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看W ...

随机推荐

  1. BEC listen and translation exercise 35

    高中听力: At five o'clock, we have afternoon tea, but we don't have it in the kitchen. Father's Day is t ...

  2. 2017-2018-1 20179215《Linux内核原理与分析》第四周作业

    本次的实验是使用gdb跟踪调试内核从start_kernel到init进程启动,并分析启动的过程. 1.首先是在实验楼虚拟机上进行调试跟踪的过程. cd LinuxKernel qemu -kerne ...

  3. XP系统下显示文件或文件的安全选项卡

    在很多的时候,我们需要设置文件或文件夹的权限,这里一般就要用到安全选项卡,但在xp系统下,默认是不显示的,如何调出我们的“安全”选项卡呢? 具体做法:点击“工具”菜单下的"文件夹选项(o). ...

  4. Poj 1860 Currency Exchange(Bellman-Ford,SPFA解单源最短路径问题)

    一.题意 有多个货币交易点,每个只能互换两种货币,兑换的汇率不同,并收取相应的手续费.有N种货币,假定你拥有第S中,数量为V,有M个兑换点.问你能不能通过兑换操作使你最后拥有的S币比起始的时候多. 二 ...

  5. docker Get started part 4: Accessing your cluster cannot curl

    1. 问题描述 docker Get started part 4 can't visit myvm1 or myvm2. curl: (7) Failed to connect to 192.168 ...

  6. PHP7三元运算符 ?? 和 ?: 的区别

    1. (expr1) ?? (expr2)  是 PHP7才有的功能,等同于: isset(expr1) ? expr1 : expr2 ; 2.(expr1) ?: (expr2) 是PHP5.3才 ...

  7. 报错apachectl restart

    httpd not running, trying to start(98)Address already in use: make_sock: could not bind to address [ ...

  8. 韩顺平循序渐进学JAVA从入门到精通 视频全套，需要的联系我

    0讲-开山篇.avi 10讲-访问修饰符.重载.覆盖.avi 11讲-约瑟夫问题.avi 12讲-多态.avi 13讲-抽象类.接口.avi 14讲-final.作业评讲.avi 15讲-作业.测试题 ...

  9. 用C语言实现一个公用库函数void * memmove(void *dest,const void *src,size_t n)

    用C语言实现一个公用库函数void * memmove(void *dest,const void *src,size_t n). 该函数的功能是拷贝src所指的内存内容前n个字节到dest所指的地址 ...

  10. [dp]最长单调递增子序列LIS

    https://www.51nod.com/tutorial/course.html#!courseId=12 解题关键: 如果将子序列按照长度由短到长排列,将他们的最大元素放在一起,形成新序列$B\ ...