0

0

JavaScript跨域(3):HTTP access control (CORS)跨域

php中文网

php中文网

发布时间:2016-06-07 15:38:25

|

1614人浏览过

|

来源于php中文网

原创

网上看了很多博客和文档,感觉还是Mozilla大大写的最简单、最好懂,不过文字很长。。 https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS 要整篇翻译,我肯定吃不消,当然也没这个必要,下面就提要说一点吧,这个方法还存在兼容性问题,尽

  网上看了很多博客和文档,感觉还是mozilla大大写的最简单、最好懂,不过文字很长。。

https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

  要整篇翻译,我肯定吃不消,当然也没这个必要,下面就提要说一点吧,这个方法还存在兼容性问题,尽管有相应的解决手段,但是觉得用起来不是特别爽。

Cross-site HTTP requests are HTTP requests for resources from a different domain than the domain of the resource making the request.  For instance, a resource loaded from Domain A (http://domaina.example) such as an HTML web page, makes a request for a resource on Domain B (http://domainb.foo), such as an image, using the img element (http://domainb.foo/image.jpg).  This occurs very commonly on the web today — pages load a number of resources in a cross-site manner, including CSS stylesheets, images and scripts, and other resources.

  跨站点的HTTP请求也就是从一个域名向另一个域名发送请求(POST,GET等),比如,从http://a.com向http://b.com请求一张图片(http://b.com/images.jpg),这种请求或者说这种现象是时有发生的,所以找到一个好方法来处理这类问题也是十分有必要的。

 

立即学习Java免费学习笔记(深入)”;

Mozilla大大说

  如下,我们在http://foo.example向页面http://bar.example发送请求:

var invocation = new XMLHttpRequest(); 
var url = 'http://bar.other/resources/public-data/'; 
     
function callOtherDomain() { 
  if(invocation) {     
    invocation.open('GET', url, true); 
    invocation.onreadystatechange = handler; 
    invocation.send();  
  } 
}

  可以看看服务器对浏览器的响应

GET /resources/public-data/ HTTP/1.1 
Host: bar.other 
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Language: en-us,en;q=0.5 
Accept-Encoding: gzip,deflate 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 
Connection: keep-alive 
Referer: http://foo.example/examples/access-control/simpleXSInvocation.html 
Origin: http://foo.example 
  
  
HTTP/1.1 200 OK 
Date: Mon, 01 Dec 2008 00:23:53 GMT 
Server: Apache/2.0.61  
Access-Control-Allow-Origin: * 
Keep-Alive: timeout=2, max=100 
Connection: Keep-Alive 
Transfer-Encoding: chunked 
Content-Type: application/xml
  
[XML Data]

  这些都是关于HTTP的一些数据和参数,如果不太明白的话,可以看看这本书《HTTP权威指南》

  前半截是FF3.5发送的文件头请求,后半截是服务器的响应。你应该注意到了我标红的那些字,这个就是本文要讲述的重点。

  在请求之前,我们也可以自己设定一些服务器要响应的内容

var invocation = new XMLHttpRequest(); 
var url = 'http://bar.other/resources/post-here/'; 
var body = 'Arun'; 
      
function callOtherDomain(){ 
  if(invocation) 
    { 
      invocation.open('POST', url, true); 
      invocation.setRequestHeader('X-PINGOTHER', 'pingpong'); 
      invocation.setRequestHeader('Content-Type', 'application/xml'); 
      invocation.onreadystatechange = handler; 
      invocation.send(body);  
    } 
  
......

  setRequestHeader顾名思义就是设置请求头的一些参数。

  上面说了半天也就是告诉大家一些服务器和客户端相关参数设置和解释,还没太涉及到跨域的东西。

影谱
影谱

汉语电影AI辅助创作平台

下载

 

立即学习Java免费学习笔记(深入)”;

Cross Domain [跨域]

  这是我放到SAE上的一段代码(http://1.qianduannotes.sinaapp.com/test/ACAO.php)

php
    header("Access-Control-Allow-Origin: *");
    //header("Access-Control-Allow-Origin: http://yourURL.com");
    echo "hello world";
?>

  如果我没加header("Access-Control-Allow-Origin: *")这句话,你通过ajax或者其他方式来请求这个数据是会报错的,不信就可以试试这个链接http://1.qianduannotes.sinaapp.com/test/ACAO_none.php

  其中的“*”表示所有域都可以访问,如果将Access-Control-Allow-Origin设置为一个特定的URL,那这个文件就只能被特定URL以及他的子域(http://yoururl.com/sub/)访问。

 

立即学习Java免费学习笔记(深入)”;

Compatibility [兼容性]

Show all versions IE Firefox Chrome Safari Opera iOS Safari Opera Mini Android Browser Blackberry Browser
                2.1  
                2.2  
            3.2   2.3  
            4.0-4.1   3.0  
  8.0   24.0     4.2-4.3   4.0  
  9.0 19.0 25.0 5.1   5.0-5.1   4.1  
Current 10.0 20.0 26.0 6.0 12.1 6.0 5.0-7.0 4.2 7.0
Near future   21.0 27.0           10.0
Farther future   22.0 28.0            

  最明显的就是IE(8、9)的bug,可以通过XDomainRequest来解决。

// 1. Create XDR object 
var xdr = new XDomainRequest(); 
// 2. Open connection with server using GET method
xdr.open("get", "http://www.contoso.com/xdr.aspx");
// 3. Send string data to server
xdr.send();     

  下面附上一个MSDN上的DEMO

JavaScript跨域(3):HTTP access control (CORS)跨域JavaScript跨域(3):HTTP access control (CORS)跨域XDomainRequest From MSDN

<html>
<script type="text/javascript">
    var xdr;
    function readdata()
    {
        var dRes = document.getElementById('dResponse');
        dRes.innerText = xdr.responseText;
        alert("Content-type: " + xdr.contentType);
        alert("Length: " + xdr.responseText.length);
    }
    
    function err()
    {
        alert("XDR onerror");
    }
    function timeo()
    {
        alert("XDR ontimeout");
    }
    function loadd()
    {
        alert("XDR onload");
        alert("Got: " + xdr.responseText);
    }
    function progres()
    {
        alert("XDR onprogress");
        alert("Got: " + xdr.responseText);
    }
    function stopdata()
    {
        xdr.abort();
    }
    function mytest()
    {
        var url = document.getElementById('tbURL');
        var timeout = document.getElementById('tbTO');
        if (window.XDomainRequest)
        {
            xdr = new XDomainRequest();
            if (xdr)
            {
                xdr.onerror = err;
                xdr.ontimeout = timeo;
                xdr.onprogress = progres;
                xdr.onload = loadd;
                xdr.timeout = tbTO.value;
                xdr.open("get", tbURL.value);
                xdr.send();
            }
            else
            {
                alert('Failed to create');
            }
        }
        else
        {
            alert('XDR doesn't exist');
        }
    }


    

XDomainRequest

 

立即学习Java免费学习笔记(深入)”;

Reference [参考资料]

  1.Mozilla

  2.MSDN

  3.http://caniuse.com/

  4.屈屈(关闭了页面,链接给忘了,^_^)

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
2026春节习俗大全
2026春节习俗大全

本专题整合了2026春节习俗大全,阅读专题下面的文章了解更多详细内容。

68

2026.02.11

Yandex网页版官方入口使用指南_国际版与俄罗斯版访问方法解析
Yandex网页版官方入口使用指南_国际版与俄罗斯版访问方法解析

本专题全面整理了Yandex搜索引擎的官方入口信息,涵盖国际版与俄罗斯版官网访问方式、网页版直达入口及免登录使用说明,帮助用户快速、安全地进入Yandex官网,高效使用其搜索与相关服务。

200

2026.02.11

虫虫漫画网页版入口与免费阅读指南_正版漫画全集在线查看方法
虫虫漫画网页版入口与免费阅读指南_正版漫画全集在线查看方法

本专题系统整理了虫虫漫画官网及网页版最新入口,涵盖免登录观看、正版漫画全集在线阅读方式,并汇总稳定可用的访问渠道,帮助用户快速找到虫虫漫画官方页面,轻松在线阅读各类热门漫画内容。

40

2026.02.11

Docker容器化部署与DevOps实践
Docker容器化部署与DevOps实践

本专题面向后端与运维开发者,系统讲解 Docker 容器化技术在实际项目中的应用。内容涵盖 Docker 镜像构建、容器运行机制、Docker Compose 多服务编排,以及在 DevOps 流程中的持续集成与持续部署实践。通过真实场景演示,帮助开发者实现应用的快速部署、环境一致性与运维自动化。

4

2026.02.11

Rust异步编程与Tokio运行时实战
Rust异步编程与Tokio运行时实战

本专题聚焦 Rust 语言的异步编程模型,深入讲解 async/await 机制与 Tokio 运行时的核心原理。内容包括异步任务调度、Future 执行模型、并发安全、网络 IO 编程以及高并发场景下的性能优化。通过实战示例,帮助开发者使用 Rust 构建高性能、低延迟的后端服务与网络应用。

1

2026.02.11

Spring Boot企业级开发与MyBatis Plus实战
Spring Boot企业级开发与MyBatis Plus实战

本专题面向 Java 后端开发者,系统讲解如何基于 Spring Boot 与 MyBatis Plus 构建高效、规范的企业级应用。内容涵盖项目架构设计、数据访问层封装、通用 CRUD 实现、分页与条件查询、代码生成器以及常见性能优化方案。通过完整实战案例,帮助开发者提升后端开发效率,减少重复代码,快速交付稳定可维护的业务系统。

6

2026.02.11

包子漫画网页版入口与全集阅读指南_正版免费漫画快速访问方法
包子漫画网页版入口与全集阅读指南_正版免费漫画快速访问方法

本专题汇总了包子漫画官网和网页版入口,提供最新章节抢先看方法、正版免费阅读指南,以及稳定访问方式,帮助用户快速直达包子漫画页面,无广告畅享全集漫画内容。

159

2026.02.10

MC.JS网页版快速畅玩指南_MC.JS官网在线入口及免安装体验方法
MC.JS网页版快速畅玩指南_MC.JS官网在线入口及免安装体验方法

本专题汇总了MC.JS官网入口和网页版快速畅玩方法,提供免安装访问、不同版本(1.8.8、1.12.8)在线体验指南,以及正版网页端操作说明,帮助玩家轻松进入MC.JS世界,实现即时畅玩与高效体验。

89

2026.02.10

谷歌邮箱网页版登录与注册全指南_Gmail账号快速访问与安全操作教程
谷歌邮箱网页版登录与注册全指南_Gmail账号快速访问与安全操作教程

本专题汇总了谷歌邮箱网页版的最新登录入口和注册方法,详细提供官方账号快速访问方式、网页版操作教程及安全登录技巧,帮助用户轻松管理Gmail邮箱账户,实现高效、安全的邮箱使用体验。

78

2026.02.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号