跨域的解决方案

跨域的解决方案

1. jsonp

       -> 十年前火爆前端的跨域解决方案
       -> 至今还在使用, 越来越少
       -> **和 ajax 没有关系**
   

2. cors

       -> 五年前火爆前端的跨域解决方案
       -> 目前占市场份额大概 45%
       -> **和 前端 没有关系, 是后端来操作的**
       -> 将来工作的时候, 后端会告诉你我开启了 cors
   

   4. 代理(服务器代理)、

   -> 三年前火爆前端的跨域解决方案
   -> 目前占市场份额大概 50%
   -> 使用 nginx 服务器来代理发送请求
   

---

jsonp跨域

script 标签

      + 默认有一个 type 属性, 值是 text/javascript
      + 不管 src 请求什么文件, 都是把文件里面的所有内容都当作字符串读取出来
      + 把读取出来的字符串当作 js 代码来执行
    代码本身没有错, 错的是你把他放错了文件

src 属性

  + script 的 src 属性不受浏览器同源策略的影响
  + script 标签的 src 属性, 爱请求谁家的服务器请求谁家的服务器
  + 我们就可以使用 script 标签的 src 属性去请求一个别人家的服务器
  + 只要给我返回一个正确的 js 语法的代码, 那么就可以执行了

现在, 这个 script 标签请求的 php 文件

      + 返回的内容就是一个 'alert("你好 世界 php")'
      + script 标签会把这个字符串当作 js 代码来执行

不是把jsonp.php当js执行了嘛？ 那为什么还能执行echo？

  + script 请求的是 jsonp.php 文件没错
  + script 请求时在 apache 服务器上发送的
  + apahce 服务器不管你怎么请求 php 文件
    => 只要他看到了 php 代码, 就会把他当作 php 给你先解析了

cors 跨域

    + 跨域是浏览器不让你请求别人家的服务器
    + 如果别人家的服务器告诉浏览器, 我允许这个域名请求我
      => 浏览器就管不着了, 就可以正常请求了

// 1.
var xhr = new XMLHttpRequest()

// 2.
xhr.open('GET', 'http://127.0.0.1/server/cors.php')

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

// 4.
xhr.send()

---

proxy => 代理

代理跨域(服务器正向代理跨域)、

    + 因为 **浏览器不允许** 你请求一个 **非同源** 的地址
    + 解决问题:
      => 在浏览器同源设置一个 代理服务器
      => 把本该发送给目标服务器的请求发送给 代理服务器
      => 由 代理服务器 转发请求给 目标服务器
      => 目标服务器把响应返回给 代理服务器
      => 代理服务器 在把响应给到 浏览器

怎么进行代理配置

    + 只要是服务器就能做代理
      => 但是 apache 代理
        -> http 的不需要花钱(以前的传输协议, 不加密传输)
        -> https 是需要花钱的(现在多用的传输协议, 加密传输)
      => nginx 代理
        -> http 和 https 都是免费的
    + 不在使用 apache 服务器了
      => 使用 nginx 服务器

  1. 打开 phpstudy 窗口
    => 点击切换版本
    => 点击 php5.4.xxx + nginx
  2. 打开 phpstudy 窗口
    => 点击其他选项菜单
    => 点击打开配置文件
    => 点击 nginx-conf(config)
      -> 大概在 56 行左右有一个 server
      -> 顺着开始括号找到 server 的闭合大括号
      -> 在这个闭合大括号的上面一行书写代理配置
    => 代理配置
      -> 我写了空格的地方你们也要写空格
      -> /gx 是你们自己定的, 些什么都可以, 这个就是代理标识符
        -> 斜线也是必须要有
      -> {} 里面的那个地址, 就是你要跨域请求的地址(目标服务器的地址)
        -> 最后的分号必须有
      location = /gx {
          proxy_pass http://127.0.0.1/server/proxy.php;
      }
      -> 修改完毕以后, 一定要重启服务器
    => 当你在 ningx 服务器上发送请求
      -> 只要请求你自己写的 代理标识符
      -> 那么就会由 nginx 服务器来帮你转发请求到 proxy_pass 地址

注意:

    + 当你切换到 nginx 服务器以后
    + 不管是 html 文件还是 php 文件, 都不能用中文了
      => 只要是中文就报错了

// 1.
var xhr = new XMLHttpRequest()

// 2./
//    请求的是代理标识符
//       nginx 会把我这个请求帮我代理到 http://127.0.0.1/server/proxy.php
xhr.open('GET', '/test')

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

// 4.
xhr.send()

中国加油！武汉加油！千峰加油！我自己加油！