web跨域问题解决方案

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

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 参考博文

时间: 2024-10-07 17:29:01

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

.net 访问 geoserver 发布的 wms &nbsp; 跨域问题解决方案

环境:  服务器  geoserver2.4.1 开发机访问服务器发布的wms 存在跨域问题,研究两天终于找到解决方案. 主要思路是: 使用jquery的ajax 代替Groserver的request, 然后将wms的请求地址转发到.net的处理程序, 使用.net的处理程序进行跨域处理.  function mouseClick(e) {             var layer = new Array();             layer = map.getLayersByName(

angularjs跨域post解决方案

转自:http://www.thinksaas.cn/topics/0/34/34536.html 前端同学李雷和后台同学韩梅梅分别在自己电脑上进行开发,后台接口写好的时候,李雷改动完就把前端代码上传到gitlab,然后在测试机上从gitlab上拉下来,然后在测试机上移动最新代码,最后回到本机刷新页面.有时候碰到网速不好的情况传个git传了半天,或者李雷刚上传完发现少写了一个单词,加上再传上一看尼玛单词又写错了.对于实时需要改动代码的李雷同学而言 另外一种方案是李雷和韩梅梅分别在自己电脑上进行开

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

from:http://www.cnblogs.com/landeanfen/p/5177176.html 阅读目录 一.跨域问题的由来 二.跨域问题解决原理 三.跨域问题解决细节 1.场景描述 2.场景测试 四.总结 正文 前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看WebAPI的另一个常见问题:跨域问题.本篇主要从实例的角度分享下CORS解决跨域问题一些细节. WebApi系列文章 C#进阶系列--WebApi接口测试工具:WebApiTestClient C#进阶系列

Javascript跨域访问解决方案

Javascript跨域访问解决方案 分类: WEB TIPS 2009-02-13 14:08 15882人阅读 评论(5) 收藏 举报 javascriptiframeservletcallbackdomainfunction 由于安全方面的考虑,Javascript被限制了跨域访问的能力,但是有时候我们希望能够做一些合理的跨域访问的事情,那么怎么办呢?这里分两类情况:一.基于同一父域的子域之间页面的访问:参见如下3个domain域:taobao.com.jipiao.taobao.com.

jquery跨域访问解决方案

客户端“跨域访问”一直是一个头疼的问题,好在有jQuery帮忙,从jQuery-1.2以后跨域问题便迎刃而解.由于自己在项目中遇到跨域问题,借此机会对跨域问题来刨根问底,查阅了相关资料和自己的实践,算是解决了跨域问题.便记录下来,以供查阅.         jQuery.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的.        真实案例:        $.ajax({             async:false,             url: 'http:

PHP Ajax 跨域问题解决方案

本文通过设置Access-Control-Allow-Origin来实现跨域. 例如:客户端的域名是client.0751.tv,而请求的域名是server.0751.tv. 如果直接使用ajax访问,会有以下错误: XMLHttpRequest cannot load http://server.0751.tv/server.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.Ori

Web 跨域请求

在前端开发过程中,难免和服务端产生数据交互.一般情况我们的请求分为这么几种情况:   1. 只关注发送,不关注接收  2.不仅要发送,还要关注服务端返回的信息       a.  同域请求      b.  跨域请求 所谓 跨域,一般情况下为三种情况:跨协议.跨子域.跨域名.下面距离梳理一下这三种情况. 跨协议:比如说我现在的域名地址是http://www.12306.cn,有一些请求需要发送到https://www.12306.cn,此时这个请求相对与http://www.12306.cn来说

跨域请求解决方案

在前端开发过程中,难免和服务端产生数据交互.一般情况我们的请求分为这么几种情况: 只关注发送,不关注接收 不仅要发送,还要关注服务端返回的信息 同域请求 跨域请求 上面提到了一个概念,我们这里简单做一下讲解.什么叫做跨域?一般情况下,跨域分为三种情况:跨协议.跨子域.跨域名.下面距离梳理一下这三种情况. 跨协议:比如说我现在的域名地址是http://www.12306.cn,有一些请求需要发送到https://www.12306.cn,此时这个请求相对与http://www.12306.cn来说

No &#39;Access-Control-Allow-Origin&#39; Ajax跨域访问解决方案

No 'Access-Control-Allow-Origin' header is present on the requested resource. 当使用ajax访问远程服务器时,请求失败,浏览器报如上错误.这是出于安全的考虑,默认禁止跨域访问导致的. 一.什么是跨域访问 举个栗子:在A网站中,我们希望使用Ajax来获得B网站中的特定内容.如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题.你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据,否则就是不安全的.跨域访问违反