跨域请求

 

 同源策略

        同源策略是浏览器给的一个行为

        当你再发送请求的时候, 会涉及到两个地址

          1. 打开当前页面的地址

          2. 你要请求的地址

        两个地址中的 端口号 域名 传输协议

          只要由任意一个不一样, 就是非同源请求

        会触发浏览器的同源策略

          不允许你获取这个服务器上的数据

 

 触发了同源策略的请求我们叫做 跨域请求

        私人: 请求别人家的服务器（实战情况）

   

     第一:

          页面(html, js, css, 静态资源) 是在一个服务器上

        所有的数据, 数据库, 在一个服务上

      

  第二:

          我自己不具备条件, 购买别人家服务器服务

          美团: 地图功能

          新闻: 买新浪的接口, 腾讯的接口

  

解决浏览器不允许请求别人家服务器的情况

        基于 http 协议

 

 打开页面 localhost/index.html

          页面里面发送一个请求 ajax({ url: './a.php' })

      请求地址: localhost/a.php

        完整地址

      打开页面 http://localhost:80/index.html

          请求地址 http://localhost:80/a.php

        1. jsonp

 jsonp 跨域

        浏览器的同源策略, 不允许发送跨域的 ajax 请求

        使用 jsonp 手法来实现跨域请求

 

script 标签

        script 标签可以执行 js 代码

          script 标签有一个属性叫做 type="text/javascript"

          会把里面的代码当作 js 来解析 

          不写 type 属性的时候, 默认是 text/javascript

        src 属性

          src 是引入外部资源的属性

          不受同源策略的影响

        当上面两个加再一起

          只要你引入任何一个内容, 都会被当作 js 代码来解析

 jsonp 的核心

        利用 script 标签的 src 属性

        去向一个非同源的服务器请求数据

        只要这个服务器能给我返回一个字符串

        我就会把这个字符串当作 js 代码来执行

 jsonp 请求数据

        要求服务器返回一个 函数名() 这样的字符串

        提前准备号一个函数

        前端告诉后端你准备好的函数名是什么

          再次发送请求的时候, 以参数的形式告诉后端

          准备好的函数名是什么

  jsonp 常见的面试题

        1. jsonp 原理

          src 不受同源策略影响

          script 标签会把请求的内容当作 js 代码来执行

        2. jsonp 的返回值

        字符串, 函数名() 形式的字符串

          一段可以执行的 js 代码字符串

        3. jsonp 的优缺点

          优点

            绕开了同源策略, 实现跨域请求

            方便, 因为是以 script 标签外部资源的形式请求

          缺点

 不好做安全防范

2.cors - 跨域资源共享

 CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）它允许浏览器向跨源服务器，发出

XMLHttpRequest

请求，从而克服了AJAX只能

同源

使用的限制。

            跨域请求, 不是请求发不出来

            实际上: 请求已经发送了, 而且到了服务器了, 响应页回到浏览器了

            但是浏览器判断了是非同源位置, 不允许你使用服务器给回的数据

            由服务器告诉浏览器一个事情, 这个域名我允许请求我的内容

            header("Access-Control-Allow-Origin:*");

            header("Access-Control-Request-Methods:GET, POST");

            header('Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid');

php部分：

<?php
 // 告诉浏览器我允许他请求我
 // 响应头里面说明一下
 header(&quot;Access-Control-Allow-Origin:*&quot;);
 header(&quot;Access-Control-Request-Methods:GET, POST&quot;);
 header('Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid');
 echo 'hello cors';
?>

        

注意：

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。

简单请求：

浏览器直接发出CORS请求。就是在头部信息之中，增加一个

Origin

字段。

非简单请求：

是那种对服务器有特殊要求的请求，比如请求方法是

PUT

或

DELETE

，或者

Content-Type

字段的类型是

application/json

。

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的

XMLHttpRequest

请求，否则就报错。