今天准备通过JavaScript的方式调用问说问答的内容,由于使用的不同的二级域名,遇到了一个跨域问题,虽然可以使用JSON或者XML来解决这个问题,但是我们可以通过Access-Control-Allow-Origin解决跨域问题,下面一起来看看Access-Control-Allow-Origin跨域问题的解决方法。

什么是跨域?

顾名思义,跨域就是不同的域名下的资源访问,会被浏览器的本地安全策略阻止,例如www.uedsc.com去AJAX请求一个wenda.uedsc.com的资源,他们实际上是不同的两个二级域名,顶级域名是uedsc.com,就会出现跨域访问问题。

下面的这张表格可以清晰解释那些属于跨域,那时不是属于跨域

URL 说明 是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js
同一域名下 允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js
同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js
同一域名,不同端口 不允许
http://www.a.com/a.js
https://www.a.com/b.js
同一域名,不同协议 不允许
http://www.a.com/a.js
http://170.32.82.74/b.js
域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js
同一域名,不同二级域名 不允许
http://www.a.com/a.js
http://a.com/b.js
二级域名和一级域名 不允许(cookie这种情况下也不允许访问)
http://www.b.com/a.js
http://www.a.com/b.js
不同域名 不允许

有了对跨域的基本概念了解后,就可直接进入这篇文章的主题了。

跨域访问解决方法

若在接收请求的服务端abc.com/B页面用的是PHP语言,则在页面头部加入,注意一定是在没有输出任何信息之前:

// 指定可信任的域名来接收响应信息,推荐
header('Access-Control-Allow-Origin:http://A.abc.com');

或者你可以设置响应任意域名的资源

// 使用通配符 * ,表示当前服务端通话任何域名发起请求,不推荐
header('Access-Control-Allow-Origin:*');

就这样在服务端简单加一句响应头responese headers声明,一个跨域请求就不会被浏览器的同源安全策略所阻止了!

注意

添加响应头responese headers时,允许跨域请求的域名带不带斜杠/还是有区别的,带斜杠/会报错:

XMLHttpRequest cannot load  abc.com/B. The ‘Access-Control-Allow-Origin’ header has a value ‘http://A.abc.org/’ that is not equal to the supplied origin. Origin ‘http://A.abc.org’ is therefore not allowed access.

header('Access-Control-Allow-Origin:*');HTML5新增的一项标准功能,因此 IE10以下版本的浏览器是不支持的,因此,如果要求兼容IE9或更低版本的ie浏览器,会导致使用此种方式的跨域请求以及传递Cookie的计划夭折,最终还得回归JSONP,目前主流 的处理方式是使用JSONP,易于实现,兼容性好,可查的资料也很多。

跨域解决后,如果还要操作Cookie,还得继续补增响应头:

header('Access-Control-Allow-Credentials:true');

需要将 XMLHttpRequest 对象的 withCredentials 属性设置为 true,JQuery1.5.1+ 就开始提供了相应的字段,使用方式如下:

$.ajax({
    url:"B.abc.com",
    xhrFields:{
        withCredentials:true
    },
    crossDomain:true
});

设置 withCredentials 为 true 的请求中会包含 A.abc.com端的所有Cookie,这些Cookie仍然遵循同源策略,所以,你只能访问其中和 abc.com/B同根域的Cookie,而无法访问其他域的Cookie。

Access-Control-Allow-Origin实则是html5 Cross-Origin Resource Sharing实现的最重要的一点参数配置。
Cross-Origin Resource Sharing,跨域资源共享,简称 CORS,可以作为一种跨域请求以及响应的解决方案。

附:禁用浏览器安全策略

禁用chrome本地安全策略,不用配服务器环境也能发起ajax请求:
chrome 桌面快捷键 右键属性 在快捷方式标签下的“目标”框中加入 --disable-web-security,重启浏览器即可

(转)HTML5开发中Access-Control-Allow-Origin跨域问题的更多相关文章

  1. SNF快速开发平台MVC-EasyUI3.9之-WebApi跨域处理方案

    在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案.由于时间有限,本文不会深入. 笔者遇到的问题是Js调用WebAPI中的数据进行跨域的场景.涉及若干跨域方案:目前采用we ...

  2. Access control allow origin 简单请求和复杂请求

    原文地址:http://blog.csdn.net/wangjun5159/article/details/49096445 错误信息: XMLHttpRequest cannot load http ...

  3. XSS中的同源策略和跨域问题

    转自 https://www.cnblogs.com/chaoyuehedy/p/5556557.html 1 同源策略 所谓同源策略,指的是浏览器对不同源的脚本或者文本的访问方式进行的限制.比如源a ...

  4. AngularJS中get请求URL出现跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...

  5. Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  6. [转]js中几种实用的跨域方法原理详解

    转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...

  7. springboot中通过cors协议解决跨域问题

    1.对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现. 针对跨域问题,我们可能第一个想到的解决方案就是jsonp,并且以前处理跨域问题我基本也是这么处 ...

  8. jQuery中利用JSONP解决AJAX跨域问题

    写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨 ...

  9. web前端之html5开发中常用的开发工具

    正所谓“工欲善其事,必先利其器”,对Web开发人员来说,好工具的使用总会给人带来事半功倍的效果.正准备学习HTML5或者已经进行了一段时间的HTML5开发的童鞋,都有必要了解下,HTML5都有哪些开发 ...

随机推荐

  1. chattr lsattr

    chattr命令的用法:chattr [ -RVf ] [ -v version ] [ mode ] files…最关键的是在[mode]部分,[mode]部分是由+-=和[ASacDdIijsTt ...

  2. 【大数据系列】win10不借助Cygwin安装hadoop2.8

    一.下载安装包 解压安装包并创建data,name,tmp文件夹 二.修改配置文件 1.core-site.xml <?xml version="1.0" encoding= ...

  3. Android NDK学习(2)Windows下NDK开发环境配置

    转:http://www.cnblogs.com/fww330666557/archive/2012/12/14/2817386.html 一.配置好Android开发环境 二.下载安装安卓NDK   ...

  4. Android 屏幕适配:最全面的解决方案

    转自:https://www.jianshu.com/p/ec5a1a30694b 前言 Android的屏幕适配一直以来都在折磨着我们Android开发者,本文将结合: Google的官方权威适配文 ...

  5. GoldenGate的监控

    1.进入GoldenGate安装目录,运行GGSCI,然后使用info all查看整体的运行状况 GGSCI (aix212) 1> info all Program Status Group ...

  6. centos 7安装jdk、tomcat

    jdk安装 创建上传目录: [root@ckl1 home]# pwd /home [root@ckl1 home]# mkdir upload 安装上传工具: yum install lrzsz 上 ...

  7. JavaScript 异步进化史

    前言 JS 中最基础的异步调用方式是 callback,它将回调函数 callback 传给异步 API,由浏览器或 Node 在异步完成后,通知 JS 引擎调用 callback.对于简单的异步操作 ...

  8. Android短信发送器_08

    1.string xml代码 <?xml version="1.0" encoding="utf-8"?> <resources> &l ...

  9. windows桌面通知区域不显示音量图标的解决方法

    在windows系统桌面通知区域一般都是显示的输入法.电源.网络.音量及托盘的应用程序等内容 通知区域图标显示与否与控制面板的通知区域图标的设置有关,我们有时会遇到通知区域不显示个别图标的情况,如不显 ...

  10. Linux查看磁盘目录内存空间使用情况

    du 显示每个文件和目录的磁盘使用空间 命令参数 -c或--total  除了显示个别目录或文件的大小外,同时也显示所有目录或文件的总和. -s或--summarize  仅显示总计,只列出最后加总的 ...