zoukankan      html  css  js  c++  java
  • php + ajax + html 简单跨域问题

    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代码

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <title>php+ajax+html跨域问题</title>
     5 <script src="jquery.js" ></script>
     6 </head>
     7 <body>
     8 <form>
     9     姓名<input type="text" id="uname" /><br/>
    10     <input type="button" value="btn" id="btn" />
    11 </form>
    12 </body>
    13 <script>
    14     $(function(){
    15         $("#btn").click(function(){
    16             var uname = $("#uname").val();
    17             var serviceUrl = "http://localhost:8080/abc/index.php";
    18             var param = {'json':'{"name":"'+uname+'"}'};
    19             $.post(serviceUrl,param,function(data){
    20                 console.log(data);
    21             });
    22         });
    23     });
    24 </script>
    25 </html>        

    简化的index.php代码

    1 <?php
    2     if(isset($_POST["json"])){
    3         echo $_POST["json"];
    4         exit();
    5     }
    6 ?>

    跨域问题的出现

    开启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按钮,结果如下

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

  • 相关阅读:
    常用的电脑快捷键【转】
    win10关闭自动更新【转】
    JavaScript中双叹号(!!)作用【转】
    javascript中获取dom元素的高度和宽度【转】
    javascript的setTimeout()用法总结,js的setTimeout()方法【转】
    JavaScript sort() 方法使用【转】
    JavaScript slice() 方法使用【转】
    Ball CodeForces
    C. Trailing Loves (or L'oeufs?)
    C
  • 原文地址:https://www.cnblogs.com/lhat/p/4717612.html
Copyright © 2011-2022 走看看