刚刚接触ajax就遇到一个词--跨域。

在我百度了各种资料以后总结了一句话:“只要不是在一个协议、域、名端口下,都属于跨域(127.0.0.1本地也属于跨域)”。

在做ajax请求的时候,请求不到并且浏览器会报错,错误如下:

XMLHttpRequest cannot load http://xxxxxxNo 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xxxxxxx' is therefore not allowed access.

我在查阅跨域的资料之后,学了两种解决跨域问题的方法。

一、设置header头运行ajax跨域

这步前端不需要做什么,正常使用dataType : 'json',和post请求。

只需要后台设置允许跨域。代码如下:

// 指定允许其他域名访问

httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");

// 响应类型

httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST");

// 响应头设置

httpServletResponse.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");

Access-Control-Allow-Origin:* 表示允许任何域名跨域访问,由于设置*存在安全隐患,建议将*改成你想允许的域名。

看到一篇文章说只设置Access-Control-Allow-Origin这一个属性也可以允许跨域。

二、允许jsonp跨域

php代码

//需要获取的数据

$data = array('id'=>1, 'name'=>'ityangs');

//设置参数名

$callback = $_GET['callback'];

//输出

echo $callback.'('.json_encode($data).')';

//退出

exit;

输入的结果是:'users({'id': 1, 'name': 'ityangs'})'

前端代码

$.ajax({

type : "get",//jsonp的本质是利用script标签的src属性进行跨域请求,只能用于get请求。

url : "ajax.php",

dataType : "jsonp",

jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)

jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名

success : function(json){

alert('success');

},

error:function(){

alert('fail');

}

});

由于个人见识有限,又是个渣前端,如有差错,请多多见谅,并提出修改办法,勿喷。

在用AJAX跨域请求时遇到的问题的更多相关文章

  1. 为什么返回的数据前面有callback? ashx/json.ashx?的后面加 callback=? 起什么作用 js url?callback=xxx xxx的介绍 ajax 跨域请求时url参数添加callback=?会实现跨域问题

    为什么返回的数据前面有callback?   这是一个同学出现的问题,问到了我. 应该是这样的: 但问题是这样的: 我看了所请求的格式和后台要求的也是相同的.而且我也是这种做法,为什么他的就不行呢? ...

  2. ajax跨域请求时,sessionId不一样,导致无法记住登陆状态

    遇到这样一个场景,就是前端的域是dev,请求接口时,接口的域是beta,即使在服务端设置了cookie存放的域,'COOKIE_DOMAIN'   =>  '.roboming.com',虽然c ...

  3. ajax 跨域请求时url参数添加callback=?会实现跨域问题

    例如: 1.在 jQuery 中,可以通过使用JSONP 形式的回调函数来加载其他网域的JSON数据,如 "myurl?callback=?".jQuery 将自动替换 ? 为正确 ...

  4. SpringMvc+ajax跨域请求时,出现options类型的请求并返回403的解决方案

    在使用 $.ajax({ url:'http://127.0.0.1:8081/rest/ccxxx/xxxx', type:'POST', dataType:"json", co ...

  5. Ajax跨域请求,设置content

    在使用Ajax跨域请求时,如果设置Header的ContentType为application/json,会分两次发送请求.第 一次先发送Method为OPTIONS的请求到服务器,这个请求会询问服务 ...

  6. ASP.NET MVC 实现AJAX跨域请求方法《1》

    ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...

  7. webapi 解决ajax跨域请求问题

    webapi在配置文件中加入这几句就可以解决ajax(同源策略是JavaScript里面的限制,其他的编程语言,比如在C#,Java或者iOS等其他语言中是可以调用外部的WebService,也就是 ...

  8. Nginx 实现AJAX跨域请求

    在工作中遇到跨域请求的问题: AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Con ...

  9. jQuery ajax跨域请求的解决方法

    在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...

随机推荐

  1. CentOS7系列--5.2CentOS7中配置和管理Docker

    CentOS7配置和管理Docker Docker是操作系统级别的虚拟化工具,它能自动化布署在容器中的应用 1. 安装Docker 1.1. 安装Docker相关软件 [root@server1 ~] ...

  2. CentOS7系列--3.2CentOS7中配置iSCSI服务

    CentOS7配置iSCSI服务 在网络上的存贮服务为iSCSI Target,而连接到iSCSI Target服务的叫iSCSI Initiator 1. 直接配置iSCSI Target服务 1. ...

  3. Difference between model.evaluate vs model.predict in Keras

    The  model.evaluate  function predicts the output for the given input and then computes the metrics ...

  4. Flutter Stack布局中定位的方式

    前言 想要记录一下Stack布局中,定位的两种方式 代码 //……省略无关代码…… child: new Column( children: <Widget>[ new SizedBox( ...

  5. C语言中的逗号表达式

    转载:http://www.cnblogs.com/hnrainll/archive/2011/08/03/2126660.html C语言提供一种特殊的运算符——逗号运算符.用它将两个表达式连接起来 ...

  6. zabbix系列之八——安装后配置三Triggers

    1Triggers(触发器) 描述 详细 备注 术语描述 1)触发器是评估监控项采集的数据的逻辑表达式,代表了当前系统状态. 2)触发器可定义一个什么数据是可接受的阈值,因此,如果接收的数据超过了可接 ...

  7. 分享:将WDCP中的PHP5.2 1.7升级到PHP 5.3的方法

    将wdcp中php 5.2.17升级到php 5.3方法: 1.首先下载wdcp php5.3升级脚本 wget http://down.wdlinux.cn/in/php_up53.sh 2.进行安 ...

  8. selenium&PhantomJS笔记

    配置pip文件 Windows下pip 配置文件的位置%HOME%/pip/pip.ini linux下安装pip,以Debian Linux为例su -apt-get install python- ...

  9. ORACLE闪回机制分析与研究应用

    1.查看数据库归档和闪回状态,及环境准备SQL> archive log list;SQL> select flashback_on from v$database;关闭数据库,启动归档和 ...

  10. [翻译] VBFPopFlatButton

    VBFPopFlatButton https://github.com/victorBaro/VBFPopFlatButton Flat button with 21 different states ...