ajax跨域问题解决方案（jsonp，cors）
跨域
跨域有三个条件，满足任何一个条件就是跨域
1：服务器端口不一致
2：协议不一致
3：域名不一致
解决方案：
1.jsonp
在远程服务器上设法动态的把数据装进js格式的文本代码段中，供客户端调用和进一步处理；在前台通过动态添加script标签及src属性，表面看上去与ajax极为相似，但是，这和ajax并没有任何关系；为了便于使用及交流，逐渐形成了一中非正式传输协议，人们把它称作 jsonp 。
代码如下：
html：
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）的更多相关文章
- PHP下ajax跨域的解决方案之CORS
由于安全的限制(同源策略,javascript只能访问同域名下的内容),如果需要进行跨域操作,那就免不了要进行跨域. CORS(跨域资源共享,Cross-Origin Resource Shari ...
- AJAX跨域调用相关知识-CORS和JSONP（引）
AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常 ...
- C#进阶系列——WebApi 跨域问题解决方案：CORS
前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看WebAPI的另一个常见问题:跨域问题.本篇主要从实例的角度分享下CORS解决跨域问题一些细节. WebApi系列文章 C#进阶系列— ...
- C#进阶系列——WebApi 跨域问题解决方案：CORS(转载)
C#进阶系列——WebApi 跨域问题解决方案:CORS 阅读目录 一.跨域问题的由来 二.跨域问题解决原理 三.跨域问题解决细节 1.场景描述 2.场景测试 四.总结 正文 前言:上篇总结了下W ...
- 跨域学习笔记2--WebApi 跨域问题解决方案：CORS
自己并不懂,在此先记录下来,留待以后学习... 正文 前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看WebAPI的另一个常见问题:跨域问题.本篇主要从实例的角度分享下CORS解决跨 ...
- JAVAEE——宜立方商城11：sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求（jsonp）
1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...
- ajax跨域请求解决方案 CORS和JSONP
什么是跨域: 只要协议.域名.端口有任何一个不同,都会被当成不同的域.而由于浏览器的同源策略(同源策略:域名.协议.端口均相同),浏览器之间要隔离不同域的内容,禁止互相操作,不能执行其他网站的js.所 ...
- 再也不学AJAX了！（三）跨域获取资源 ② - JSONP & CORS
浏览器的"同源策略"固然保障了互联网世界的数据隐私与数据安全,但是如果当我们需要使用AJAX跨域请求资源时,"同源策略"又会成为开发者的阻碍.在本文中,我们会简 ...
- 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 ...
- WebApi 跨域问题解决方案：CORS
注:本文为个人学习摘录,原文地址:http://www.cnblogs.com/landeanfen/p/5177176.html 前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看W ...
随机推荐
- Python编程-一个小爬虫工具的实现过程
需求描述: 1,打开网站: 2,获取网站的文件内容: 3,返回保存到文件中: 这里的就用到了多线程的方法 import requests,threading,time def write_html(u ...
- 解决编译warning：warning: ‘MeteringUnit::voltage_gain_’ will be initialized after [-Wreorder]
问题: 环境:ubuntu 12.04,g++版本4.6.3,编译目标文件时出现warnings: u1204@u1204-zhw:~/hwsvn/2sw/4prj_mips/UCP_rt5350/s ...
- JEECG datagrid 列表检索条件 添加下拉级联功能
$("#communityId").change( function(){ var id = $(this).children('option:selected').val(); ...
- redis的五种数据类型及应用场景
前言 redis是用键值对的形式来保存数据,键类型只能是String,但是值类型可以有String.List.Hash.Set.Sorted Set五种,来满足不同场景的特定需求. 本博客中的示例不是 ...
- bzoj 2406 矩阵 —— 有源汇上下界可行流
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2406 这题,首先把题目那个式子的绝对值拆成两个限制,就成了网络流的上下界: 有上下界可行流原 ...
- POJ 1664 放苹果（递归或DP）
一.Description 把M个同样的苹果放在N个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分法?(用K表示)5,1,1和1,5,1 是同一种分法. Input 第一行是测试数据的数目t ...
- ThinkPHP5.1的公共函数
最初使用ThinkPHP3.2.3的时候,我们自己定义的公共函数常常放置于 \Common\function.php ThinkPHP5.1 公共函数 项目公用的会放在 \application\co ...
- HDOJ1238(string)
Substrings Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- 【转】 Pro Android学习笔记（六八）：HTTP服务（2）：HTTP POST
目录(?)[-] 找一个测试网站 HTTP POST小例子 上次学习了HTTP GET请求,这次学习一下HTTP POST. 找一个测试网站 小例子好写,但要找个测试网站就有些麻烦,一下子无从入手,都 ...
- springMVC绑定json参数之二（2.2.2）
二.springmvc 接收不同格式的json字符串 2).格式二:json字符串数组 前台: test = function () { var test = ["123",&qu ...