在前端开发及调试过程中总能遇到浏览器报如下错误：

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

该错误由浏览器的同源策略（同ip,同端口，同协议视为同一个域，一个域内的脚本仅仅具有本域内的权限，可以理解为本域脚本只能读写本域内的资源，而无法访问其它域的资源。这种安全限制称为同源策略。 ）所引起的。

解决方案

1.CORS（Cross-Origin Resource Sharing）是W3C在05年提出的跨域资源请求机制，它要求当前域（常规为存放资源的服务器）在响应报头添加Access-Control-Allow-Origin标签，从而允许指定域的站点访问当前域上的资源。

不过CORS默认只支持GET/POST这两种http请求类型，如果要开启PUT/DELETE之类的方式，需要在服务端在添加一个"Access-Control-Allow-Methods"报头标签

2.JSONP

JSONP(JSON with Padding)是JSON的一种“使用模式”，主要是利用script标签不受同源策略限制的特性，向跨域的服务器请求并返回一段JSON数据。

客户端

---------------------------------------------------------------

<!DOCTYPE html>
　　<html>
　　　　<head lang="en">
　　　　<meta charset="UTF-8">
　　　　<title>JSONP</title>
　　　　<script src="jq.js"></script>
　　　　</head>
　　<body>
　　<div></div>
　　<script>
　　　　$.ajax({
　　　　　　url:'http://127.0.0.1:1234/',
　　　　　　dataType:"jsonp", //告知jQ我们走的JSONP形式
　　　　　　jsonpCallback:"abc", //callback名
　　　　　　success:function(data){
　　　　　　　　console.log(data)
　　　　　　　　}
　　　　　　});
　　</script>
　　</body>
　　</html>

-------------------------------------------------------------------------------

服务端

------------------------------------------------------------------------------

var http = require('http');
var urllib = require('url');

var data = {'name': 'vajoy', 'addr': 'shenzhen'};

http.createServer(function(req, res){
res.writeHead(200, { 'Content-type': 'text/plain'});
var params = urllib.parse(req.url, true);
//console.log(params);
if (params.query && params.query.callback) {
//console.log(params.query.callback);
var str = params.query.callback + '(' + JSON.stringify(data) + ')';//jsonp
res.end(str);
} else {
res.end(JSON.stringify(data));//普通的json
}
}).listen(1234)

--------------------------------------------------------------------------------

不过JSONP始终是无状态连接，不能获悉连接状态和错误事件，而且只能走GET的形式。

http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 参考博文

web跨域问题解决方案的更多相关文章

  1. Web 跨域请求问题的解决方案- CORS 方案

    1.什么是跨域 跨域是指跨域名的访问,以下情况都属于跨域: 跨域现象 实例 域名不相同 www.baidu.com与www.taobao 一级域名相同,但是端口不相同 www.baidu.com:80 ...

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

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

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

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

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

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

  5. angularjs跨域post解决方案

    转自:http://www.thinksaas.cn/topics/0/34/34536.html 前端同学李雷和后台同学韩梅梅分别在自己电脑上进行开发,后台接口写好的时候,李雷改动完就把前端代码上传 ...

  6. web跨域及cookie相关知识总结

    原文:web跨域及cookie相关知识总结   之前对于跨域相关的知识一致都很零碎,正好现在的代码中用到了跨域相关的,现在来对这些知识做一个汇总整理,方便自己查看,说不定也可能对你有所帮助. 本篇主要 ...

  7. 干掉Session？这个跨域认证解决方案真的优雅！

    用户登录认证是 Web 应用中非常常见的一个业务,一般的流程是这样的: 客户端向服务器端发送用户名和密码 服务器端验证通过后,在当前会话(session)中保存相关数据,比如说登录时间.登录 IP 等 ...

  8. web跨域访问，session丢失的问题

    web跨域访问,session丢失的问题25 http://www.iteye.com/problems/71265 http://www.iteye.com/topic/264079 具体情况如下: ...

  9. thinkphp，javascript跨域请求解决方案

    javascript跨域请求解决方案 前言 对于很多前端或者做混合开发的同学,我们难免会遇到跨域发起请求业务,比如A站点向B站点请求数据等等.由于最近要做一个站点集群的项目,所以具体业务要求很多个站点 ...

随机推荐

  1. AcWing 207. 球形空间产生器 （高斯消元）打卡

    有一个球形空间产生器能够在n维空间中产生一个坚硬的球体. 现在,你被困在了这个n维球体中,你只知道球面上n+1个点的坐标,你需要以最快的速度确定这个n维球体的球心坐标,以便于摧毁这个球形空间产生器. ...

  2. Ettercap详细参数

    关于界面:ettercap提供 4 种运行界面: Text            #文本模式,参数 -T ,一般配合 -q(安静模式)使用 Curses/GTK         #图形模式,参数 -C ...

  3. Kafka启动报错

    文章目录 问题 解决 问题 通过 ./kafka-server-start.sh ../config/server.properties 启动kafka 之前在server.properties中修改 ...

  4. 查看.Net Framework的版本（PC和WinCE）

    一.在电脑上查看.Net Framework的版本 (1)第一步: 打开“我的电脑“,在地址栏输入 %systemroot%\Microsoft.NET\Framework 第二步:从列出来的文件夹中 ...

  5. 在VMware下创建windows2008虚拟机

    1.创建新的虚拟机 打开VMware软件,点击主页内创建新的虚拟机 2.进入新建虚拟机向导 点击典型,点击下一步 3.在下一步中单击稍后安装操作系统 点击下一步 4.选择操作系统类型 客户机操作系统选 ...

  6. awk 按小时 统计接口调用次数

    #统计所有接口总量awk -F ' ' '{a[$7]++} END{for(i in a){print i,a[i] | "sort -r -k 7"}}' accesslog/ ...

  7. Linux/x86-64 - setuid(0) & chmod ("/etc/passwd", 0777) & exit(0) - 63 byes

    /* Title: Linux/x86-64 - setuid(0) & chmod ("/etc/passwd", 0777) & exit(0) - 63 by ...

  8. 移动端mintUI mt-datetime-picker 组件使用详解

    <mt-datetime-picker v-model="pickerVisible" //绑定的数据值 ref="pickerData" // 点击触发 ...

  9. 【牛客网-剑指offer】变态跳台阶

    题目: 一只青蛙一次可以跳上1级台阶,也可以跳上2级--它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 考点: 递归和循环 分析: 台阶数 跳法 1 1 2 2 3 4 4 8 5 1 ...

  10. Android中XML的命名空间、自定义属性

    命名空间(namespace) XML 命名空间提供避免元素命名冲突的方法. 举个例子,A学校有名学生叫做林小明,B学校也有名学生叫林小明,那我们如何识别这两名拥有相同名字的同学呢?这时候命名空间就派 ...