JS复习-29-同源策略、跨域

同源策略

  同源策略是浏览器给的一个行为
    + 当你再发送请求的时候, 会涉及到两个地址
      1. 打开当前页面的地址
      2. 你要请求的地址
    + 两个地址中的 端口号 域名 传输协议
      => 只要由任意一个不一样, 就是非同源请求
      => 就会触发浏览器的同源策略
      => 不允许你获取这个服务器上的数据

  触发了同源策略的请求叫：跨域请求

  解决浏览器不允许请求别人家服务器的情况
    + 基于 http 协议
    1. jsonp
    2. cors
    3. 代理

jsonp 常见的面试题

    1. jsonp 原理
      => src 不受同源策略影响
      => script 标签会把请求的内容当作 js 代码来执行
    2. jsonp 的返回值
      => 字符串, 函数名() 形式的字符串
      => 一段可以执行的 js 代码字符串
    3. jsonp 的优缺点
      => 优点
        -> 绕开了同源策略, 实现跨域请求
        -> 方便, 因为是以 script 标签外部资源的形式请求
      => 缺点
        -> 不好做安全防范

代理

 利用一个正向代理的机制来实现
     任何一台服务器都可以做代理
          => apache 服务器 代理 http 协议的是免费的
          => apache 服务器 代理 https 协议需要证书的
          => 我们配置代理使用 nginx 服务器来配置代理
      配置
          => phpstudy 切换到 nginx 服务器
          => 其他选项菜单 -> 打开配置文件 -> nginx.conf
          => 找到当前服务器的 server 标签对, 找到闭合标签的上一行书写代理配置
          => location = /xx {
            proxy_pass 地址;
          }
            -> /xx: 代理标识符, 当你请求 /xx 的时候, nginx 会发现你在请求代理标识符
                    就会自动帮你转发你的请求到 proxy_pass 后面的地址
            -> proxy_pass: 代理目标地址
          => 只要配置文件被修改了, 那么就要重启服务器

cors - 跨域资源共享

        跨域请求,请求已经发送了, 而且到了服务器了, 响应页回到浏览器了
        => 但是浏览器判断了是非同源位置, 不允许你使用服务器给回的数据
        => 由服务器告诉浏览器一个事情, 这个域名我允许请求我的内容
        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');