AJAX-跨域请求

本文涉及的产品
.cn 域名,1个 12个月
简介: 1、什么是跨域请求浏览器均默认开启了同源策略,它指Ajax请求所在的页面和被请求的页面在域名、端口均相同才能被访问,否则会提示如下错误:XMLHttpRequest cannot load xxxxxxx is not allowed by Access-Control-Allow-Origin.2、JSONP解决方案2.1 JSONP原理JSONP 不是真正的AJAX请求,是利用script的src可可以跨域的特性,动态加载一段script脚本,脚本中包含需要的信息。

1、什么是跨域请求

浏览器均默认开启了同源策略,它指Ajax请求所在的页面和被请求的页面在域名、端口均相同才能被访问,否则会提示如下错误:

XMLHttpRequest cannot load xxxxxxx is not allowed by 
Access-Control-Allow-Origin.

2、JSONP解决方案

2.1 JSONP原理

JSONP 不是真正的AJAX请求,是利用script的src可可以跨域的特性,动态加载一段script脚本,脚本中包含需要的信息。

2.2 基础代码实现

html源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp跨域</title>
    <script type="text/javascript">
        function callbak(rs){
            alert(rs.data);
        }
    </script>
    <script src="http://127.0.0.1:8080"></script>
</head>
<body>
</body>
</html>

node js 服务器代码:

//调用http模块
var http = require('http'); 
var server = http.createServer(function (request, response) {
     response.writeHead(200, {
        'Content-Type': 'application/javascript'
    });
    response.write("callbak({'data':'jsonp'});");
    response.end();
   
});
server.listen(8080);
//打印日志
console.log('Http server is started. http://127.0.0.1:8080');

注意:
(1)函数名callbak 前端与后端需要一致
(2)服务器反馈的数据类型application/javascript 类型

2.3 JSONP 公用函数封装。

前端代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp跨域</title>
</head>
<body id="body">
</body>
<!-- 主要要在body之后,否则document.body为null-->
<script type="text/javascript">
        function jsonp(url,callback){
            //动态生成函数名称
            var funcName= "callback"+new Date().getTime();
            //添加callback参数到url中(假设url中没有其他参数)
            url = url + "?callback="+funcName;
            //设置全局函数是传人行数
            window[funcName] = callback;
            //创建Script标签
            var script = document.createElement("script");
            script.src = url;
            //添加到body中
            var body = document.body;
            body.appendChild(script);
            //动态标签加载完成
            script.onload = function(){
                //删除script标签
                body.removeChild(script);
                //删除全局函数
                window[funcName] = null;
            }
        }
        var url = "http://127.0.0.1:8080";
        jsonp(url,function(rs){
            alert(rs.data);
        });
    </script>
</html>

node js 后端代码:

//调用http模块
var http = require('http'); 
var url = require('url');
var server = http.createServer(function (request, response) {
     response.writeHead(200, {
        'Content-Type': 'application/javascript'
    });
    //请求参数转换为json格式
    var arg = url.parse(request.url, true).query;
    //获取回调方法名称
    var funcName = arg.callback;
    response.write(funcName + "({'data':'jsonp'});");
    response.end();
   
});
server.listen(8080);
//打印日志
console.log('Http server is started. http://127.0.0.1:8080');

3、CROS解决方案

3.1 CROS简单

CORS需要浏览器和服务器同时支持。只有支持XmlHttpRequest Level2的浏览器才支持。
  整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。
  因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

3.2 CROS服务器端设置

(1)Access-Control-Allow-Origin
  该字段是必须的。它的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求。

(2)Access-Control-Request-Method
  该字段是必须的,列出浏览器的CORS请求会用到哪些HTTP方法。

**(3)Access-Control-Expose-Headers **
  该字段可选。CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。
**(4)Access-Control-Allow-Credentials **
  该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true,如果服务器不要浏览器发送Cookie,删除该字段即可。
(5)Access-Control-Max-Age
  该字段可选,用来指定本次预检请求的有效期,单位为秒,在此期间,不用发出另一条预检请求。

3.3 CROS跨域Cookie

CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器,一方面要服务器同意,指定Access-Control-Allow-Credentials字段,设置** Access-Control-Allow-Credentials: true**。

Access-Control-Allow-Credentials: true

另一方面,开发者必须在AJAX请求中打开withCredentials属性。

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

否则,即使服务器同意发送Cookie,浏览器也不会发送。或者,服务器要求设置Cookie,浏览器也不会处理。但是,如果省略withCredentials设置,有的浏览器还是会一起发送Cookie。这时,可以显式关闭withCredentials,设置withCredentials=false;
特别注意
需要注意的是,如果要发送Cookie,Access-Control-Allow-Origin就不能设为星号,必须指定明确的、与请求网页一致的域名。同时,Cookie依然遵循同源政策,只有用服务器域名设置的Cookie才会上传,其他域名的Cookie并不会上传,且(跨源)原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

3.4 CROS预检

(1)预检查概述
  非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。
(2)预检查请求
  "预检"请求用的请求方法是OPTIONS,表示这个请求是用来询问的。头信息里面,关键字段是Origin,表示请求来自哪个源。除了Origin字段,"预检"请求的头信息包括两个特殊字段。Access-Control-Request-MethodAccess-Control-Request-Headers
(3)预检查响应
  服务器收到"预检"请求以后,检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后,确认允许跨源请求,就可以做出回应。回应的内容参考服务端配置。

3.5 CROS 正常请求与回应

一旦服务器通过了"预检"请求,以后每次浏览器正常的CORS请求,就都跟简单请求一样,会有一个Origin头信息字段。服务器的回应,也都会有一个Access-Control-Allow-Origin头信息字段。

相关文章
|
5月前
|
前端开发
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
|
前端开发 JavaScript
|
Web App开发 前端开发 JavaScript
|
安全 JavaScript 前端开发
Springboot如何优雅的解决ajax+自定义headers的跨域请求
Springboot如何优雅的解决ajax+自定义headers的跨域请求
Springboot如何优雅的解决ajax+自定义headers的跨域请求
|
前端开发 JavaScript
jQuery Ajax 简单的实现跨域请求
jQuery Ajax 简单的实现跨域请求
326 0
|
JavaScript 前端开发 Linux
Python全栈 Web(Ajax JQuery-AJAX 跨域请求)
Flask、Python、Django、框架、服务器、客户端、浏览器、交互、WEB、Python前端、CSS、JAVA、HTML、H5、PHP、JavaScript、JQuery、分布式开发
5224 0
|
JSON JavaScript PHP
AJAX 跨域请求 - JSONP获取JSON数据 jsson和jsonp
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。
1653 0
|
前端开发 JavaScript PHP
php中ajax跨域请求---小记
php中ajax跨域请求---小记   前端时间,遇到的一个问题,情况大约是这样: 原来的写法: 前端js文件中: $.ajax({   type:'get',   url:'http://wan.
1014 0
|
前端开发
ajax跨域请求数据
最近开始接触ajax的跨域请求问题,相比网上说的一大堆,我这里就说得比较浅显了。 关于为什么要跨域这个问题,实际的需求是当网站项目部署在一个域名上的时候,分域可以很好地解决网站卡顿问题(拥有多台服务器就另当别论)。
702 0