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

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. Linux系统之-介绍,主要特性

    Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.它能运行主要的UNIX工具软件.应用程序和网络协议.它支持32位 ...

  2. CDN技术详解(七)

    动态内容加速服务的实现 随着Web2.0的兴起,产生了动态网页.个性化内容.电子交易数据等内容的加速,这些就涉及了动态内容加速技术. 静态内容的加速,都是对于表现层的加速,对于动态页面等内容的加速,则 ...

  3. Toast 使用方法大全

    原文地址:http://daikainan.iteye.com/blog/1405575 Toast 是一个 View 视图,快速的为用户显示少量的信息. Toast 在应用程序上浮动显示信息给用户, ...

  4. 大数据学习笔记之Linux基础(一):Linux初窥

    文章目录 一.Linux入门概述 1.1 概述 1.2 下载地址 1.3 Linux特点 1.4 Linux和Windows区别 二.VM安装相关 2.1 安装VMWare虚拟机 2.2 安装Cent ...

  5. 【C++第一个Demo】---控制台RPG游戏2【通用宏、背包类】

    [通用 ]--一些游戏中常用的宏.函数和枚举 #ifndef _MARCO_H_ #define _MARCO_H_ //------------------------常用系统库---------- ...

  6. 08、python的基础--->文件操作

    注:用btyes方式的一般都是在“非文字类的(比如图片)” 1.文件的读取 >>>第1种 #绝对路径 s = open('E:\天气.txt', mode='r', encoding ...

  7. idea下远程debug配置

    一. 背景: 在测试工作中,为方便发现代码中的逻辑问题,尝试使用远程debug模式,在测试过程中走查代码,不仅可以辅助测试减少与开发的沟通成本,更便于了解业务提升测试深度. 二. 配置方式: 1. 调 ...

  8. MATLAB图像uint8,uint16,double, rgb转灰度解释

    1.uint8,uint16与double 为了节省存储空间,matlab为图像提供了特殊的数据类型uint8(8位无符号整数),以此方式存储的图像称作8位图像.matlab读入图像的数据是uint8 ...

  9. nginx匹配以XXX结尾的

    匹配以do结尾的所有文件:如http://192.168.126.168:8080/delivery/transportPlanData.do?startRelease=2019-07-06& ...

  10. 如何在Web项目中配置Spring MVC

    要使用Spring MVC需要在Web项目配置文件中web.xml中配置Spring MVC的前端控制器DispatchServlet <servlet> <servlet-name ...