跨域的解决方案：JSONP、CORS

梦里梦外; 2023-02-28 12:56 15阅读 0赞

#### 解决方案 ####

现代化的 Web 应用中肯定会有不同源的现象，所以必然要解决这个问题，从而实现跨域请求。

> 参考：http://rickgray.me/solutions-to-cross-domain-in-browser

#### JSONP ####

**JSON** with **P**adding，是一种借助于 `script` 标签发送跨域请求的技巧。

其原理就是在客户端借助 `script` 标签请求服务端的一个地址，服务端的这个地址返回一段带有调用某个全局函数调用的 JavaScript 脚本（而非一段 HTML），将原本需要返回给客户端的数据通过参数传递给这个函数，函数中就可以得到原本服务端想要返回的数据。

以后绝大多数情况都是采用 JSONP 的手段完成不同源地址之间的跨域请求

客户端 http://www.zce.me/users-list.html

服务端 http://api.zce.me/users?callback=foo 返回的结果

foo(['我', '是', '你', '原', '本', '需', '要', '直', '接', '返', '回', '的', '数', '据'])

**总结一下**：由于 XMLHttpRequest 无法发送不同源地址之间的跨域请求，所以我们必须要另寻他法，script 这种方案就是我们最终选择的方式，我们把这种方式称之为 JSONP，如果你不了解原理，先记住怎么用，多用一段时间再来看原理。

问题：

1.  JSONP 需要服务端配合，服务端按照客户端的要求返回一段 JavaScript 调用客户端的函数
2.  只能发送 GET 请求

> 注意：JSONP 用的是 script 标签，更 AJAX 提供的 XMLHttpRequest 没有任何关系！！！

##### jQuery 中对 JSONP 的支持 #####

jQuery 中使用 JSONP 就是将 dataType 设置为 jsonp

$.ajax({ 
      url: 'https://douban.uieee.com/v2/comming_soon',
      type: 'get',
      dataType: 'jsonp',
      data: {  id: 1 },
      beforeSend: function (xhr) { 
        console.log('before send')
      },
      success: function (data) { 
        console.log(data)
      },
      error: function (xhr) { 
        console.log(xhr)
      },
      complete: function (xhr) { 
        console.log('request completed')
      }
    })

> Axios 由于设计原因不支持 JSONP

案例：

index.html

app.js

db.json

[{ 
        "name": "姚娟",
        "content": "白周理石快地们等求众真农多局导实。影元看表干克复交员率响当便定群道。度代布大料标拉红感应石加节。今必可何原火其属日条铁金系。构十被从回商值管并少况圆期十山。况市或安开路次美回育市具度。因众铁界别也斯事点极线和别矿。",
        "created": "1992-01-01 21:52:23"
    }, { 
        "name": "常军",
        "content": "矿说安西件族就写研界政到府。装却事看青写十五层同并达层难果用千家。则素值万议区清办量认入拉省教。展清值心特响起先大市算六为。这战电治你亲别低小会连革能。又东名还家况料东理县际便列每自。断系计照资质切部代当级面号标。",
        "created": "1994-12-01 18:23:42"
    }]

--------------------

#### CORS ####

Cross Origin Resource Share，跨域资源共享

app.get('/time', (req, res) => { 
      // // 允许任意源访问，不安全
      // res.set('Access-Control-Allow-Origin', '*')
      // 允许指定源访问
      res.set('Access-Control-Allow-Origin', 'http://zce.me')
      res.send(Date.now().toString())
    })

这种方案无需客户端作出任何变化（客户端不用改代码），只是在被请求的服务端响应的时候添加一个 `Access-Control-Allow-Origin` 的响应头，表示这个资源是否允许指定域请求。

> https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access\_control\_CORS