XMLHttpRequest cannot load http://localhost:8080/abc/index.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'file:///E:/myprogram/php/abc/index.html' is therefore not allowed access.

我想实现的目标是这样的: 用php写好一个接口，然后html中ajax直接post这个接口，进行json数据的交互。

简化的index.html代码

 <!DOCTYPE html>

 <html>

 <head>

 <title>php+ajax+html跨域问题</title>

 <script src="jquery.js" ></script>

 </head>

 <body>

 <form>

     姓名<input type="text" id="uname" /><br/>

     <input type="button" value="btn" id="btn" />

 </form>

 </body>

 <script>

     $(function(){

         $("#btn").click(function(){

             var uname = $("#uname").val();

             var serviceUrl = "http://localhost:8080/abc/index.php";

             var param = {'json':'{"name":"'+uname+'"}'};

             $.post(serviceUrl,param,function(data){

                 console.log(data);

             });

         });

     });

 </script>

 </html>

简化的index.php代码

 <?php

     if(isset($_POST["json"])){

         echo $_POST["json"];

         exit();

     }

 ?>

跨域问题的出现

开启apache服务器后，这样访问 file:///D:/abc/index.html 页面，不要http://localhost:8080/abc/index.html 访问，因为这样访问的话，就看不到跨域问题的出现了

当我们在index.html填写好姓名后，点击btn按钮，这时ajxa请求就发送出去了。在chrome的调试模式下，控制台会提示有错误发生，如下

什么是跨域？

我的理解就是：在A网站域名下去访问B网站下的资源。

目前我使用的chrome(版本 46.0.2471.2)、FireFox(39.0)、Opera(版本30.0.1835.125)都会出现这个跨域问题

解决方法

在html的ajax要请求的服务端php页面中添加下面的一行代码：

header("Access-Control-Allow-Origin:*");

也就是http://localhost:8080/abc/index.php中添加

然后再和上面一样访问一次  file:///D:/abc/index.html ，填写好姓名，点击btn按钮，结果如下

没有出现跨域的错误提示了！

php + ajax + html 简单跨域问题的更多相关文章

  1. js中ajax如何解决跨域请求

    js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...

  2. 06: AJAX全套 & jsonp跨域AJAX

    目录: 1.1 AJAX介绍 1.2 jQuery AJAX(第一种) 1.3 原生ajax(第二种) 1.4 iframe“伪”AJAX(第三种) 1.5 jsonp跨域请求 1.6 在tornad ...

  3. ajax请求ashx跨域问题解决办法

    ajax请求ashx跨域问题解决办法 https://blog.csdn.net/windowsliusheng/article/details/51583566 翻译windowsliusheng  ...

  4. AJAX请求和跨域请求详解（原生JS、Jquery）

    一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...

  5. (转)jquery ajax使用及跨域访问解决办法

    原文地址:***/UIweb/jquery_ajax_kuayujiejue.html 最近开发中,设计到智能手机项目,给领导做几个demo.主要是用jquery和jqeury mobile. 越来越 ...

  6. 解决ajax请求cors跨域问题

    ”已阻止跨源请求:同源策略禁止读取位于 ***** 的远程资源.(原因:CORS 头缺少 'Access-Control-Allow-Origin').“ ”已阻止跨源请求:同源策略禁止读取位于 ** ...

  7. 关于ajax post请求跨域问题的解决心得

    最近啊,公司有个项目,需要做一个手机端APP的后台管理系统.所以用到了度文本编辑框,经过了好好一番周折,终于弄好了,带到上线的时候发现啊,只能使用ip去访问网页的时候上能穿图片他不会报跨域的问题,而使 ...

  8. Ajax请求，跨域小坑

    今天在上班的时候,被坐在旁边项目经理叫过去问了一个Ajax请求跨域的问题,一开始没理解清楚也还有对这个没有理解的透,后面被打击的要死. 当时的需求是需要测试一个已发布的api接口,需要在本地写测试程序 ...

  9. Ajax【介绍、入门、解决Ajax中文、跨域、缓存】

    什么是Ajax Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML Ajax实际上是下面这几种技术的融合: (1)XHTML和CSS的基于标准 ...

随机推荐

  1. JSON浅总

    我们在以前的学习中了解到XML是一种结构化的数据表示方式,一种可扩展标记语言!可以把XML理解成一个微型的结构化的小的数据库,保存一些小型的数据和传输数据,有严格的显示限制.但是XML语句有些冗长和繁 ...

  2. vim 全局替换命令

    语法  :[addr]s/源字符串/目的字符串/[option]                     :%s/源字符串/目的字符串/c 全局替换命令为: :%s/源字符串/目的字符串/g [add ...

  3. 简单几何(数学公式+凸包) UVA 11168 Airport

    题目传送门 题意:找一条直线,使得其余的点都在直线的同一侧,而且使得到直线的平均距离最短. 分析:训练指南P274,先求凸包,如果每条边都算一边的话,是O (n ^ 2),然而根据公式知直线一般式为A ...

  4. 暴力/set Codeforces Round #291 (Div. 2) C. Watto and Mechanism

    题目传送门 /* set的二分查找 如果数据规模小的话可以用O(n^2)的暴力想法 否则就只好一个一个的换(a, b, c),在set容器找相匹配的 */ #include <cstdio> ...

  5. HDU4812 D Tree（树的点分治）

    题目大概说给一棵有点权的树,输出字典序最小的点对,使这两点间路径上点权的乘积模1000003的结果为k. 树的点分治搞了.因为是点权过根的两条路径的LCA会被重复统计,而注意到1000003是质数,所 ...

  6. ural 1433. Diamonds

    1433. Diamonds Time limit: 1.0 secondMemory limit: 64 MB Sasha is lucky to have a diamond in the for ...

  7. 中国大数据六大技术变迁记(CSDN)

    大会召开前期,特别梳理了历届大会亮点以记录中国大数据技术领域发展历程,并立足当下生态圈现状对即将召开的BDTC 2014进行展望: 追本溯源,悉大数据六大技术变迁 伴随着大数据技术大会的发展,我们亲历 ...

  8. 全面解析Linux数字文件权限

    全面解析Linux数字文件权限 来源:   时间:2013-09-04 20:35:13   阅读数:11433 分享到:0 [导读] 在刚开始接触Linux时对于文件权限的理解并不是很透彻,这里详细 ...

  9. winform学习之-----页面设计-20160523

    1.将默认的Form属性设置为FormBorderStyle:none 2.picturebox均设置为backgroundImage 3.lable设置自动换行,autosize true,设置Ma ...

  10. ModelMap和ModelAndView的作用

    首先介绍ModelMap和ModelAndView的作用 ModelMap ModelMap 对象主要用于传递控制方法处理数据到结果页面,也就是说我们把结果页面上需要的数据放到ModelMap对象中即 ...