ajax跨域(No 'Access-Control-Allow-Origin' header is present on the requested resource)
问题
在某域名下使用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)的更多相关文章
- Webapi 跨域 解决解决错误No 'Access-Control-Allow-Origin' header is present on the requested resource 问题
首先是web端(http://localhost:53784) 请求 api(http://localhost:81/api/)时出现错误信息: 查看控制台会发现错误:XMLHttpRequest c ...
- SpringBoot添加Cors跨域配置，解决No 'Access-Control-Allow-Origin' header is present on the requested resource
目录 什么是CORS SpringBoot 全局配置CORS 拦截器处理预检请求 什么是CORS 跨域(CORS)请求:同源策略/SOP(Same origin policy)是一种约定,由Netsc ...
- 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 ...
- 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 ...
- 跨域问题解决----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 ...
- .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 ...
- (转)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 ...
- 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 ...
- 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 ...
随机推荐
- day06 小数据池,再谈编码
今日所学 一. 小数据池 二. is 和==的区别 三. 编码的问题 一.小数据池的作用 用来缓存数据 可以作用的数据类型: 整数(int), 字符串(str), 布尔值(bool). 什么是块 ...
- MySQL 占用cpu 100%
目前的线上数据库,分为主从两个库,从库用来做比较耗时的数据统计分析. 今天top了一下从库服务器,发现mysqld 在很长一段时间都占用105% cpu,一开始以为是从库在处理主库的binlog. 两 ...
- 软件设计基础-C/S系统
在软件设计开发过程中,逐渐形成了一些针对特定应用领域的软件系统组织方式的惯用模式 如经典的C/S(client/server,客户/服务器)模式和B/S(browser/server,浏览器/服务器) ...
- (C/C++学习笔记) 二十二. 标准模板库
二十二. 标准模板库 ● STL基本介绍 标准模板库(STL, standard template library): C++提供的大量的函数模板(通用算法)和类模板. ※ 为什么我们一般不需要自己写 ...
- Java垃圾回收理解
gc是垃圾回收,Java的垃圾回收分为年轻代回收和老年代回收,其中年轻代回收速度快,频率高,因为Java对象大多具有朝生夕灭的特性,Java对象都是new出来的,当new出很多对象的时候,年轻代很容易 ...
- SpringMVC @RequestParam和@RequestBody的区别
问题:@Requestbody 用的时候遇到400和415错误,因为请求格式不对. @RequestBody @RequestBody能把简单json结构参数转换成实体类,如下代码: @Request ...
- const & define & inline
0x01 const & define区别 宏定义#define发生在预编译期,而const,enum定义的常量发生在编译期,两者的重要差别在于编译期里的变量是进符号表的,而预编译期的宏是简 ...
- PE文件 03 重定位表
0x01 重定位表结构 重定位表是由数据目录表中的第六个成员指出的: typedef struct _IMAGE_DATA_DIRECTORY { DWORD VirtualAddress; D ...
- OJ_查找二叉树
#include<iostream>using namespace std;int n,m;int d[120];int t=1;int re;struct Node{ int data; ...
- Map的isEmpty()与==null的区别
isEmpty()方法判断Map是否有内容(即new分配空间后是否put键值对),若没有内容则true,否则false == null是判断map是否为null(即是否new分配空间,和其中的键值对没 ...