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

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. eclipse开发安卓 发短信打电话发送邮件功能

    1.在mainfiest中添加   //添加拨打电话的功能    <uses-permission android:name="android.permission.CALL_PHON ...

  2. 前端每日实战：73# 视频演示如何用纯 CSS 创作一只卡通狐狸

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OEKZed 可交互视频 此视频是可 ...

  3. 有关JWT(Json Web Token)的那些事

    用户认证是计算机安全领域一个永恒的热点话题,然而你会发现,开发者很少讨论有关Json Web Token的话题,其实使用Json Web Token集成到API身份验证机制中是容易,本文给大家普及基础 ...

  4. form表单submit事件

    form表单submit事件同时会触发form表单中button按钮的click事件 <!DOCTYPE html> <html> <head> <meta ...

  5. JS-模拟printf

    function printf(){ var args = [].slice.call(arguments), fmt = args.shift(), args_index = 0; ///%(填充的 ...

  6. datetime timestamp使用

    #coding=utf-8 import time import datetime def yes_time(): #获取当前时间 now_time = datetime.datetime.now() ...

  7. HSQL基本使用（linux），安装+Demo

    文章目录 下载 安装 运行 使用数据库 demo 注意 下载 http://sourceforge.net/projects/hsqldb/files/ 安装 将下载的包,解压到任意目录即可 运行 通 ...

  8. nginx -stream（tcp连接）反向代理配置 实现代理mysql以及文件上传

    原文链接:https://blog.csdn.net/Activity_Time/article/details/95767390 1. stream模块安装 nginx默认安装的时候无法加载流str ...

  9. HBase优化——读写优化

    Hbase2.0查询优化 1)设置scan缓存 HBase中Scan查询可以设置缓存,方法是setCaching(),这样可以有效的减少服务端与客户端的交互,更有效的提升扫描查询的性能. Scan s ...

  10. 41-python基础-python3-字符串-转义字符

    转义字符包含一个倒斜杠(\),紧跟着是想要添加到字符串中的字符.(尽管它包含两个字符,但大家公认它是一个转义字符.) 实例1: Python 知道,因为 Bob\'s 中的单引号有一个倒斜杠,所以它不 ...