XMLHttpRequest的跨域请求

最新推荐文章于 2023-06-20 16:29:47 发布
最新推荐文章于 2023-06-20 16:29:47 发布
阅读量395 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w2a44gf9xl/article/details/73369430
版权

缘起

由于浏览器的同源策略，非同源不可请求。

但是，在实践当中，经常会出现需要跨域请求资源的情况，比较典型的例如某个子域名向负责进行用户验证的子域名请求用户信息等应用。

以前要实现跨域访问，可以通过JSONP、Flash或者服务器中转的方式来实现，但是现在我们有了CORS。

CORS与JSONP相比，无疑更为先进、方便和可靠。

1
2
3
1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS

JSONP的最基本的原理

动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了。

这样其实"jQuery AJAX跨域问题"就成了个伪命题，jquery $.ajax方法名有误导人之嫌。

如果设为dataType: 'jsonp'，这个$.ajax方法就和ajax XmlHttpRequest没什么关系了，取而代之的则是JSONP协议。JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。

JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求， 我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递 javascript对象。 这种跨域的通讯方式称为JSONP。

Cross-Origin Resource sharing

这是W3C  新出的一个标准，简单的讲就是通过服务器/客户端 一些Headers的设置及确认 来实现跨域请求，这些包头有

　　Cross-Origin Resource sharing

这是W3C  新出的一个标准，简单的讲就是通过服务器/客户端 一些Headers的设置及确认 来实现跨域请求，这些包头有

 Syntax

  1. 5.1 Access-Control-Allow-Origin Response Header
  2. 5.2 Access-Control-Allow-Credentials Response Header
  3. 5.3 Access-Control-Expose-Headers Response Header
  4. 5.4 Access-Control-Max-Age Response Header
  5. 5.5 Access-Control-Allow-Methods Response Header
  6. 5.6 Access-Control-Allow-Headers Response Header
  7. 5.7 Origin Request Header
  8. 5.8 Access-Control-Request-Method Request Header
  9. 5.9 Access-Control-Request-Headers Request Header

　　 例如

  • Access-Control-Allow-Origin: http://www.test.com
  • Access-Control-Allow-Methods: POST, GET, OPTIONS  
  • Access-Control-Allow-Headers: POWERED-BY-MENGXIANHUI  
  • Access-Control-Max-Age: 30

可以参考 http://www.w3.org/TR/access-control/#access-control-allow-origin-response-header  w3c的网站

1
2
3
4
5
6
7
Access-Control-Allow-Origin: 允许跨域访问的域，可以是一个域的列表，也可以是通配符 "*" 。这里要注意Origin规则只对域名有效，并不会对子目录有效。
即http: //www.test/test/是无效的。但是不同子域名需要分开设置，这里的规则可以参照那篇同源策略
Access-Control-Allow-Credentials: 是否允许请求带有验证信息，这部分将会在下面详细解释
Access-Control-Expose-Headers: 允许脚本访问的返回头，请求成功后，脚本可以在XMLHttpRequest中访问这些头的信息(貌似webkit没有实现这个)
Access-Control-Max-Age: 缓存此次请求的秒数。在这个时间范围内，所有同类型的请求都将不再发送预检请求而是直接使用此次返回的头作为判断依据，非常有用，大幅优化请求次数
Access-Control-Allow-Methods: 允许使用的请求方法，以逗号隔开
Access-Control-Allow-Headers: 允许自定义的头部，以逗号隔开，大小写不敏感

Access-Control-Allow-Credentials

在跨域请求中，默认情况下，HTTP Authentication信息，Cookie头以及用户的SSL证书无论在预检请求中或是在实际请求都是不会被发送的。

但是，通过设置XMLHttpRequest的credentials为true，就会启用认证信息机制。

虽然简单请求还是不需要发送预检请求，但是此时判断请求是否成功需要额外判断Access-Control-Allow-Credentials，如果Access-Control-Allow-Credentials为false，请求失败。

十分需要注意的的一点就是此时Access-Control-Allow-Origin不能为通配符"*"(真是便宜了一帮偷懒的程序员)，如果Access-Control-Allow-Origin是通配符"*"的话，仍将认为请求失败

即便是失败的请求，如果返回头中有Set-Cookie的头，浏览器还是会照常设置Cookie

客户端页面test.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html xmlns= "http://www.w3.org/1999/xhtml" > 
<head> 
<title>crossDomainRequest</title> 
</head> 
<body> 
<input type= 'button'  value= '开始测试'  onclick= "crossDomainRequest()"   /> 
<div id= "content" ></div> 
<script type= "text/javascript" >
function  createXHR(){
     return  window.XMLHttpRequest?
     new  XMLHttpRequest():
     new  ActiveXObject( "Microsoft.XMLHTTP" );
}
function  getappkey(url){
     xmlHttp = createXHR();
     xmlHttp.open( "GET" ,url,false);
     xmlHttp.send();
     result = xmlHttp.responseText;
     return  result;
}
function  crossDomainRequest(){
     var  content =getappkey( 'http://127.0.0.10/gettest.php' );
     document.getElementById( "content" ).innerHTML=content;
}
</script> 
</body> 
</html> 

服务端页面gettest.php

1
2
3
4
<?php
header( "Access-Control-Allow-Origin:  http://127.0.0.1" );
echo  "test success!" ;
?>

 

 

如果不允许的话

 

 

所以跨域有以下几种方法

通过webserver【nginx】配置来跨域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#
# Wide-open CORS config for nginx
#
location / {
      if  ($request_method =  'OPTIONS' ) {
         add_header  'Access-Control-Allow-Origin'  '*' ;
         #
         # Om nom nom cookies
         #
         add_header  'Access-Control-Allow-Credentials'  'true' ;
         add_header  'Access-Control-Allow-Methods'  'GET, POST, OPTIONS' ;
         #
         # Custom headers and headers various browsers *should* be OK with but aren't
         #
         add_header  'Access-Control-Allow-Headers'  'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' ;
         #
         # Tell client that this pre-flight info is valid for 20 days
         #
         add_header  'Access-Control-Max-Age'  1728000;
         add_header  'Content-Type'  'text/plain charset=UTF-8' ;
         add_header  'Content-Length'  0;
         return  204;
      }
      if  ($request_method =  'POST' ) {
         add_header  'Access-Control-Allow-Origin'  '*' ;
         add_header  'Access-Control-Allow-Credentials'  'true' ;
         add_header  'Access-Control-Allow-Methods'  'GET, POST, OPTIONS' ;
         add_header  'Access-Control-Allow-Headers'  'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' ;
      }
      if  ($request_method =  'GET' ) {
         add_header  'Access-Control-Allow-Origin'  '*' ;
         add_header  'Access-Control-Allow-Credentials'  'true' ;
         add_header  'Access-Control-Allow-Methods'  'GET, POST, OPTIONS' ;
         add_header  'Access-Control-Allow-Headers'  'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' ;
      }
}

示例代码

1
2
3
4
5
6
7
8
9
10
location /{
add_header  'Access-Control-Allow-Origin'  'http://www.test.com' ;
add_header  'Access-Control-Allow-Credentials'  'true' ;
add_header  'Access-Control-Allow-Methods'  'GET' ;
  
...
...
  
}

第一条指令：授权从http://www.test.com的请求

第二条指令：当该标志为真时，响应于该请求是否可以被暴露

第三天指令：指定请求的方法，可以是GET，POST等

如果需要允许来自任何域的访问，可以这样配置

1Access-Control-Allow-Origin: *

通过后端程序来跨域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
header( "Access-Control-Allow-Origin:http://www.test.com" );
header( "Access-Control-Allow-Origin:*" );
echo  json_encode( $_POST );
?>
<script type= "text/javascript" >
$( "#ajax" ).click( function (){
     $.ajax({
         type:  "POST" ,
         url:  "http://www.test.com/test2.php" ,
         data:  'name=test' ,
         dataType: "json" ,
         success:  function (data){
             $( '#Result' ).text(data.name);
         }
     });
});
</script>

JSONP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
if (isset( $_GET [ 'name' ]) && isset( $_GET [ 'callback' ])) 
  //callback根js端要对应，不然会报错的
{
     echo  $_GET [ 'callback' ].  '('  . json_encode( $_GET ) . ');
}
?>
<script type= "text/javascript" >
$( "#jsonp" ).click( function (){
     $.ajax({
             url:  'http://www.test.com/test1.php' ,
             data: {name:  'jsonp' },
             dataType:  'jsonp' ,
             jsonp:  'callback' ,       //为服务端准备的参数
             jsonpCallback:  'getdata' ,    //回调函数
             success:  function (){
                 alert( "success" );
             }
     });
});
function  getdata(data){
     $( '#Result' ).text(data.name);
}
</script>

getJSON

1
2
3
4
5
6
7
8
<script type= "text/javascript" >
$( "#getjson" ).click( function (){
     $.getJSON( 'http://www.test.com/test1.php?name=getjson&callback=?' ,  function (data){
     //没有回调函数，直接处理
         $( '#Result' ).text(data.name);
     })
})
</script>

getScript

1
2
3
4
5
<script type= "text/javascript" >
$( "#getscript" ).click( function (){
     $.getScript( 'http://www.test.com/test1.php?name=getscript&callback=getdata' );
});
</script>

 

w2a44gf9xl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Chrome Extension中跨域请求访问外部网站数据方法
06-20 3450
当时做Chrome扩展，用Javascript调用外部API总是不成功，会出现across origin error。后来发现跨域了，如果想在Chrome扩展中访问其他网站数据，只需在manifest.json文件中的”permission“中声明，再用xmlhttpRequest即可。详细介绍如下(转自360chrome的开发文档，同时可参考Chrome extension)： 跨域 X...
32 _ 同源策略：为什么XMLHttpRequest不能跨域请求资源？
最新发布
所学所思
06-07 810
要了解什么是同源策略，我们得先来看看什么是同源。如果两个URL的协议、域名和端口都相同，我们就称这两个URL同源。比如下面这两个URL，它们具有相同的协议HTTPS、相同的域名time.geekbang.org，以及相同的端口443，所以我们就说这两个URL是同源的。category=1category=0浏览器默认两个相同的源之间是可以相互访问资源和操作DOM的。两个不同的源之间若想要相互访问资源或者操作DOM，那么会有一套基础的安全策略的制约，我们把这称为同源策略。
AJAX（XMLHttpRequest）进行跨域请求方法详解
chengjuli6368的博客
04-21 213
注意：以下代码请在Firefox 3.5、Chrome 3.0、Safari 4之后的版本中进行测试。IE8的实现方法与其他浏览不同。跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见，比如说通过 style 标签加载外部样式表文件、通过 img 标签加...
Xmlhttprequest请求跨域
那些年我们踩过的坑
08-23 7993
Xmlhttprequest请求跨域 同源策略 本人采用： 一：接口注解@CrossOrigin 二：过滤器对跨域请求特殊处理 HttpServletRequest servletRequest = (HttpServletRequest) request; HttpServletResponse servletResponse = (HttpServletResponse) resp
AJAX（XMLHttpRequest）进行跨域请求方法详解（一）
热门推荐
【孟子E章】
01-11 13万+
注意：以下代码请在Firefox 3.5、Chrome 3.0、Safari 4之后的版本中进行测试。IE8的实现方法与其他浏览不同。跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见，比如说通过 style 标签加载外部样式表文件、通过 img 标签加载外部图片、通过 script 标签加载外部脚本文件、通过 Webfont
xmlhttprequest跨域请求
03-09
XMLHttpRequest 跨域请求是指在浏览器中，通过 XMLHttpRequest 对象向不同域名或端口的服务器发送请求。由于浏览器的同源策略限制，跨域请求会受到限制，需要通过一些技术手段来实现。常见的跨域请求技术包括 JSONP...
XMLHttpRequest跨域请求了
09-20
XMLHttpRequest跨域请求是指在前端使用XMLHttpRequest对象发送请求时，请求的目标资源位于不同的域名下。浏览器出于安全考虑，默认情况下不允许跨域请求，即不允许从一个域名下的页面向另一个域名发起XMLHttpRequest...
AJAX(XMLHttpRequest)进行跨域请求方法详解
02-11
AJAX(XMLHttpRequest)进行跨域请求方法详解 AJAX(XMLHttpRequest)跨域请求是指一个站点中的资源访问另外一个不同域名站点上的资源。这种情况很常见，比如说通过style标签加载外部样式表文件、通过img标签加载外部...
详解AngularJS如何实现跨域请求
11-25
AngularJS，作为一个强大的前端框架，提供了多种方式来实现跨域请求。本文将详细讲解AngularJS中的$http服务如何实现跨域请求。 首先，我们来看AngularJS中的核心服务$http。它是一个基于XMLHttpRequest对象（XHR）...
XmlHttpRequest使用及“跨域”问题解决
weixin_30952535的博客
06-30 5262
一. IE7以后对xmlHttpRequest 对象的创建在不同浏览器上是兼容的。 下面的方法是考虑兼容性的，实际项目中一般使用Jquery的ajax请求，可以不考虑兼容性问题。 function getHttpObject() { var xhr=false; if (windows.XMLHttpRequest) xhr=new XMLHttpRequest()...
同源策略：为什么XMLHttpRequest不能跨域请求资源？
知之为知之，不知为不知
10-07 801
什么是同源策略 如果两个 URL 的协议、域名和端口都相同，我们就称这两个 URL 同源。比如下面这两个 URL，它们具有相同的协议 HTTPS、相同的域名 time.geekbang.org，以及相同的端口 443，所以我们就说这两个 URL 是同源的。 https://time.geekbang.org/?category=1 https://time.geekbang.org/?category=0 浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。两个不同的源之间若想要相互访问
跨域资源共享(CORS)安全性
weixin_43964148的博客
08-05 897
跨域资源共享(CORS)安全性背景 提起浏览器的同源策略，大家都很熟悉。不同域的客户端脚本不能读写对方的资源。但是实践中有一些场景需要跨域的读写，所以出现了一些hack的方式来跨域。比如...
web service006——第三种方式调用，通过Ajax方式访问（跨域）http请求xml数据
weixin_45084986的博客
09-23 84
00
AJAX--XMLHttpRequest & 跨域
郊眠寺
05-18 7041
XMLHttpRequest XMLHttpRequest 是浏览器内置的一个构造函数 作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。 axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装出来的！ 使用 XMLHttpRequest 发起 GET 请求 主要的 4 个实现步骤： 创建 xhr 对象 调用 xhr.open() 函数 调用 xhr.send() 函
利用XMLHttpRequest发起请求解决跨域
qq_37881606的博客
06-20 3399
【代码】利用XMLHttpRequest发起请求解决跨域。
原生js XMLHttpRequest发送 get post 请求 解决跨域 及 注意事项
qq_45287575的博客
02-24 7191
原生js XMLHttpRequest发送 get post 请求 解决跨域 及 注意事项
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值