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

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. Vue的安装和使用详解(一)

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与 ...

  2. idea 使用github

    [Toc] #一.首先下载github for window 客户端,或者git客户端 这里只演示gitHub客户端,安装git客户端的话,git.exe很容易找得到. 附上网址:https://de ...

  3. shell从字符串中提取子串(正则表达式)

    通过试验,可以通过grep.sed两种方式实现. 假设需要提取libgcc-4.8.5-4.h5.x86_64.rpm中的版本号. grep echo "libgcc-4.8.5-4.h5. ...

  4. eclipse 集成 STS 插件

    eclipse 集成 STS 插件 想新建一个 Spring Boot 工程,发现没有,如图:(展示的是集成之后的) eclipse 要和 sts 版本对应的,进入http://spring.io/t ...

  5. 转 loadrunner11 录制 chrome 浏览器

    chrome不设置代理的原始状态 图1 [LoadRunner]解决LR11无法录制Chrome浏览器脚本问题   LoadRunner录制脚本时,遇到高版本的IE.FireFox,或者Chrome浏 ...

  6. java获取网页源代码并写入本地文件中

    import java.io.*; import java.net.*; public class URLDemo { public static void main(String args[]){ ...

  7. testparm - 检查smb.conf配置文件的内部正确性

    总览 testparm [-s] [-h] [-L servername] [configfilename] [hostname hostIP] 描述 此程序是samba套件的一部分. testpar ...

  8. Spring mvc的执行流程

    一个请求匹配前端控制器 DispatcherServlet 的请求映射路径(在 web.xml中指定), WEB 容器将该请求转交给 DispatcherServlet 处理 DispatcherSe ...

  9. RestTemplate java.net.UnknownHostException

    背景:公司内部系统的架构升级准备用微服务一套:记录遇到的坑. 错误信息: Servlet.service() for servlet [dispatcherServlet] in context wi ...

  10. codeforces1156D 0-1-Tree 换根dp

    题目传送门 题意: 给定一棵n个点的边权为0或1的树,一条合法的路径(x,y)(x≠y)满足,从x走到y,一旦经过边权为1的边,就不能再经过边权为0的边,求有多少边满足条件? 思路: 首先,这道题也可 ...