浏览器的同源策略和跨域请求_学习版

目录

同源策略 : 

跨域请求 : 

 跨域请求的常见解决方案 : 

1. jsonp

2. cors(跨域资源共享)

3. proxy(代理)

---

同源策略 : 

什么是同源策略 ?

        + 同源策略是  浏览器  给出的关于网络安全方面的一个要求(约束)

        + 约定了, 请求方和目标方地址必须要保证 传输协议 域名 端口号 完全一致

        + 当你在发送请求的时候

        + 如果 打开页面的 完整地址 和 接受服务器的 完整地址

          => 只要 传输协议 或者 域名 或者 端口号 有任意一个不一样

          => 就叫做触发了  同源策略 

          => 当你触发同源策略以后, 浏览器不允许你获取该服务器返回给你的数据

同源 :  传输协议 和 域名 和 端口号 都完全一样

 

非同源 : 传输协议 和 域名 和 端口号 其中有任意一个不一样

---

 跨域请求 : 

** 跨域请求 **

        + 当请求触发了  同源策略 

        + 并且我们还需要请求非同源服务器的数据的时候

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

 跨域请求的常见解决方案 : 

1. jsonp

 jsonp 的实现方式 : 

        + 利用  script  标签的  src  属性, 去请求一个 非同源的 服务器地址

        + 要求: 服务器给出的内容必须是一段合法的可以执行的  js 代码

        + 要求: 服务器给出的  js 代码需要是一个  '函数名(数据)'  的格式

script 标签 :
        + 一个引入外部文件的 标签
        + 这个标签的意义, 默认会把引入的所有内容当做  js 代码来执行
        + script 标签的意义 :
          => 就是引入一个外部文件
          => 不管文件名和后缀是什么
          => 只是读取这个文件内部的内容
          => 把读取到的内容当做 js 代码来执行

src 属性 :
        + 作用: 标注引入一个外部资源的连接路径
        + 特点:
          => src 属性是 W3C 标准给出专门用来引入外部资源的属性
          => 通过 src 属性引入的外部地址,浏览器不会去管 src 引入的内容是否是跨域的
          => 所以不受浏览器同源策略的影响

jsonp 技术是一个 和 ajax 技术没有关系的一种 跨域方式
        + 利用 script 标签和 src 属性
        + 利用 script 标签会把请求回来的内容当做 js 代码执行
        + 利用 src 属性不受同源策略的影响
        + 要求: 后端返回的必须是个 合法的 js 格式 字符串  

---

2. cors(跨域资源共享)

cors(跨域资源共享) :

        + 和前端没有任何关系的一种跨域请求方案

        + 前端: 该如何发 ajax 请求, 就如何发

        + 由后端开启 cors 配置

后端开启 cors 配置 : 

<?php
  // 跨域
  // 在这里告诉浏览器, 你别管, 我愿意给他数据

  // 告诉浏览器, 哪些域名可以请求我
  // 表示允许的域名, * 表示通配
  header("Access-Control-Allow-Origin: *");
  // CORS
  // 告诉浏览器, 允许哪些请求方式
  header("Access-Control-Request-Methods:GET, POST, PUT, DELETE, OPTIONS");
  // 告诉浏览器, 允许哪些额外的请求头信息
  header('Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid,authorization');

  echo 'hello world';
?>

---

3. proxy(代理)

proxy(代理) 进行跨域 :

        + 代理方式跨域: 任何一台服务器都可以进行代理的设置和配置

        + apache 服务器

          => 代理 http 请求地址免费

          => 代理 https 请求地址需要证书

        + nginx 服务器

          => 代理 http 和 https 都是免费的

          => 注意 : 请求路径一定要是全英文 , 不要出现汉字

 使用小皮配置代理 : 

配置代理 : 

        1. 打开小皮面板

          => 把服务器从 apache 切换到 nginx

        2. 打开小皮面板

          => 左侧边栏点击设置

          => 点击配置文件

          => 选到 vhosts.conf 文件

          => 点击 0localhost_8080

        3. 找到 server 的闭合括号

          => 在闭合括号的上一行, 进行代码配置的书写

          location /xx {

            proxy_pass 你请求跨域的地址;

          }

          /xx: 你随便书写的, 叫做代理标识符

          proxy_pass 后面的地址, 就是你请求的时候会跨域的地址

        4. 一定要重启服务器

 前端 : 

    const xhr = new XMLHttpRequest()

    // 注意: 当你发送请求的时候, 请求地址 一定要直接书写 代理标识符
    // 这样服务器才会发现, 你请求的是一个 代理标识符, 我确实配置过
    // nginx 就会帮你把请求转发到 proxy_pass 配置的地址了
    xhr.open('GET', '/xhl')

    xhr.onload = function () {
      console.log(xhr.responseText)
    }

    xhr.send()

后端 : 

<?php

  echo 'hello world';

?>