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

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

  • 相关阅读:
    分页工具类
    ajax乱码的问题
    ibatis配置文件中的XML解析错误The content of elements must consist of well-formed character data or markup.
    nginx 反向代理导致的session丢失的问题
    后台返回的值ajax接收不到
    C/C++中vector与list的区别
    C/C++中内存泄漏、内存溢出与野指针的解释与说明
    C++中深拷贝与浅拷贝
    C++中的构造函数与析构函数及组合类的调用
    Linux中request_irq()中断申请与处理说明
  • 原文地址:https://www.cnblogs.com/lhat/p/4717612.html
Copyright © 2011-2022 走看看