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

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. js 常用功能实现（函数）

    1.10 个短小实用的代码片段 :https://www.jianshu.com/p/3ef822ec5a63 2.js常用函数  : https://www.cnblogs.com/wangyuyu ...

  2. 【Java架构：基础技术】一篇文章搞掂：MyBatis-Plus

    前言 Mybatis:一个流行的半自动ORM框架. Mybatis-Plus:一个Mybatis的增强工具,在Mybatis的基础上只做增强不做改变,为简化开发.提高效率而生. 本文使用的版本:myb ...

  3. postgresql的规则系统

    " class="wiz-editor-body wiz-readonly" contenteditable="false"> Postgres ...

  4. 【git】git的内部原理

    参考文章:https://zhuanlan.zhihu.com/p/96631135 参考文章:https://marklodato.github.io/visual-git-guide/index- ...

  5. Centos7下实现docker + wordpress 安装

    一.Docker CE 安装 检查是否安装过旧的版本 如果系统安装旧版本Docker需要先卸载,命令如下: [root@localhost Wordpresss]sudo yum remove doc ...

  6. Jlink 接口定义

    JTAG有10pin的.14pin的和20pin的,尽管引脚数和引脚的排列顺序不同,但是其中有一些引脚是一样的,各个引脚的定义如下. 1. 引脚定义 Test Clock Input (TCK) -- ...

  7. 字符串模式匹配算法系列（三）：Trie树及AC改进算法

    Trie树的python实现(leetcode 208) #!/usr/bin/env python #-*- coding: utf-8 -*- import sys import pdb relo ...

  8. PAT_A1093#Count PAT's

    Source: PAT A1093 Count PAT's (25 分) Description: The string APPAPT contains two PAT's as substrings ...

  9. Java对象toString()方法

    对象的字符串表示以可读格式包含有关对象状态的信息.Object类的toString()方法表示字符串中类的对象.Object类提供了toString()方法的默认实现. 它返回一个以下格式的字符串: ...

  10. FrameWork内核解析之PackageMS启动（一）下篇

    阿里P7Android高级架构进阶视频免费学习请点击:https://space.bilibili.com/474380680 1. PackageMS相关框架类   ​   2.1 PackageM ...