问题

在某域名下使用Ajax向另一个域名下的页面请求数据，会遇到跨域问题。另一个域名必须在response中添加 Access-Control-Allow-Origin 的header，才能让前者成功拿到数据。

这句话对吗？如果对，那么流程是什么样的？

跨域

怎样才能算跨域？协议，域名，端口都必须相同，才算在同一个域。

当跨域访问时，浏览器会发请求吗

这是真正困扰我们的问题，因为我们不清楚浏览器会怎么做。它会不会检查到你要请求的地址不是同一个域的，直接就禁止了呢？ 浏览器确实发出了请求

我做了一个实验，

前端(html)

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>ajax跨域</title>

<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $.ajax({

            url:'http://span.home.com/test.php',

            type:'POST',

            data:'name=hello',

            dataType:'json',

            success:function(data){

                alert(data.name);

            }

        });

    });

});

</script>

</head>

<body>

<div id="div1"><h2>使用 jQuery AJAX 获取内容</h2></div>

<button>test</button>

</body>

</html>

后台(php)

<?php

header('content-type:application:json;charset=utf8'); 

$name = isset($_REQUEST['name']) ? $_REQUEST['name'] : 'will';

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

echo json_encode($arr);

控制台上会打出：

 XMLHttpRequest cannot load http://span.home.com/test.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://span.front.com' is therefore not allowed access.

Access-Control-Allow-Origin

现在该 Access-Control-Allow-Origin 出场了。只有当目标页面的response中，包含了 Access-Control-Allow-Origin 这个header，并且它的值里有我们自己的域名时，浏览器才允许我们拿到它页面的数据进行下一步处理。如：

Access-Control-Allow-Origin:http://span.front.com

如果它的值设为 * ，则表示谁都可以用：

Access-Control-Allow-Origin: *

后台代码作了部分修改之后就可以正常拿到页面的数据：
<?php

header('content-type:application:json;charset=utf8'); 

$origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';

$allow_domain = array('http://span.front.com');

if (in_array($origin, $allow_domain))

{

    //Access-Control-Allow-Origin:* 表示允许任何域名跨域访问

    header('Access-Control-Allow-Origin:'.$origin);

    header('Access-Control-Allow-Methods:GET,POST,OPTIONS');

    header('Access-Control-Allow-Headers:x-requested-with,content-type');

}

$name = isset($_REQUEST['name']) ? $_REQUEST['name'] : 'will';

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

echo json_encode($arr);

注：前端域名 http://span.front.com, 后台域名 http://span.home.com

 

ajax跨域(No 'Access-Control-Allow-Origin' header is present on the requested resource)的更多相关文章

  1. Webapi 跨域 解决解决错误No 'Access-Control-Allow-Origin' header is present on the requested resource 问题

    首先是web端(http://localhost:53784) 请求 api(http://localhost:81/api/)时出现错误信息: 查看控制台会发现错误:XMLHttpRequest c ...

  2. SpringBoot添加Cors跨域配置，解决No 'Access-Control-Allow-Origin' header is present on the requested resource

    目录 什么是CORS SpringBoot 全局配置CORS 拦截器处理预检请求 什么是CORS 跨域(CORS)请求:同源策略/SOP(Same origin policy)是一种约定,由Netsc ...

  3. As.net WebAPI CORS, 开启跨源访问,解决错误No 'Access-Control-Allow-Origin' header is present on the requested resource

    默认情况下ajax请求是有同源策略,限制了不同域请求的响应. 例子:http://localhost:23160/HtmlPage.html 请求不同源API http://localhost:228 ...

  4. java、ajax 跨域请求解决方案（'Access-Control-Allow-Origin' header is present on the requested resource. Origin '请求源' is therefore not allowed access.）

      1.情景展示 ajax调取java服务器请求报错 报错信息如下: 'Access-Control-Allow-Origin' header is present on the requested ...

  5. 跨域问题解决----NO 'Access-Control-Allow-Origin' header is present on the requested resource.Origin'http://localhost:11000' is therfore not allowed access'

    NO 'Access-Control-Allow-Origin' header is present on the requested resource.Origin'http://localhost ...

  6. .Net Core 处理跨域问题Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

    网页请求报错: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Or ...

  7. (转)AJax跨域：No 'Access-Control-Allow-Origin' header is present on the requested resource

    在本地用ajax跨域访问请求时报错: No 'Access-Control-Allow-Origin' header is present on the requested resource. Ori ...

  8. js跨域访问，No 'Access-Control-Allow-Origin' header is present on the requested resource

    js跨域访问提示错误:XMLHttpRequest cannot load http://...... No 'Access-Control-Allow-Origin' header is prese ...

  9. WCF REST开启Cors 解决 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 405.

    现象: 编写了REST接口: [ServiceContract] public interface IService1 { [OperationContract] [WebInvoke(UriTemp ...

随机推荐

  1. [洛谷 P2508] 圆上的整点

    题目描述 求一个给定的圆(x^2+y^2=r^2),在圆周上有多少个点的坐标是整数. 输入输出格式 输入格式: r 输出格式: 整点个数 输入输出样例 输入样例#1: 4 输出样例#1: 4 说明 n ...

  2. Django之cookie+session

    前言 HTTP协议 是短连接.且状态的,所以在客户端向服务端发起请求后,服务端在响应头 加入cokie响应给浏览器,以此记录客户端状态: cook是来自服务端,保存在浏览器的键值对,主要应用于用户登录 ...

  3. [LeetCode] 231. Power of Two ☆(是否2 的幂)

    描述 Given an integer, write a function to determine if it is a power of two. 给定一个整数,编写一个函数来判断它是否是 2 的 ...

  4. SpringBoot使用Spring Initializer

    IDE都支持使用Spring的项目创建Spring的项目创建向导,快速创建一个SpringBoot项目:选择我们需要的模块:向导会联网创建SpringBoot项目:默认生成的SpringBoot项目: ...

  5. C#如何通过反射调用类下的方法

    首先模拟一个mvc的项目,创建一个业务类(HomeService),在类下创建3个方法 public class HomeService { /// <summary> /// 无参方法 ...

  6. hash与平衡二叉树的区别

    哈希表的定义:哈希表是一种根据关键码去寻找值的数据映射结构,该结构通过把关键码映射的位置去寻找存放值的地方 https://blog.csdn.net/duan19920101/article/det ...

  7. 我在大学毕业后学习Linux系统的心得经验

    扣着手指头一算,自己已经毕业快半年了,这半年莫名其妙进外包圈子溜达了一圈,有幸退的早还是正常干一些事情吧,外包终究不是太适合刚入社会的毕业生,今天想把自己的学习和工作经验写成一篇文章,希望能够帮助到正 ...

  8. python 笔记数据类型

    python基础: 采用缩进方式     4个空格的缩进 大小写敏感 数据类型和变量 数据类型 计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值,但是,计算机能处理的 ...

  9. SpringMVC中文乱码的解决办法

    中文乱码分类: (1)按照请求分类: GET请求乱码 POST请求乱码 (2)按照乱码位置分类 从前台传到后台的数据乱码(存储到数据库中的数据乱码) 从后台传到前台的数据乱码(显示在页面的数据乱码) ...

  10. ROS tab键补全操作出现错误

    ros tab键补全操作出现错误如下: $ roslaunch sp[rospack] Warning: error while crawling /home/hemudu: boost::files ...