跨域

跨域

出于安全来说,页面中的javascript无法访问其他服务器上的数据,既同源策略
同源策略:协议,域名,端口号

解决方案

jsonp(轻量级,不是ajax请求)

 利用script的src属性不收同源策略的影响,让script标签的src指向一个后端接口的地址,接口的返回值是一个js函数调用语句(不必是js文件)
 // 前端代码
 <script>
      function dosomething(rs) {
        console.log(rs);
      }
</script>
<script src="http://localhost:3000/getTime?callback=dosomething"></script>
// 后端代码
const express = require('express');
const app = express();
app.get('/gettime', (req, res) => {
  let { callback } = req.query;
  let data = JSON.stringfy( {a:1,b:2} )
  res.end(`${callback}(${data})`);
})
app.listen(3000, () => {
  console.log('你可以通过http://localhost:3000来访问...');
});
// jquery 封装 jsonp
第一步：产生一个随机函数名；并创建这个函数(jQuery34109553463653123275_1565234364495)；
第二步：动态创建script标签，其src就是拼接的后端接口地址及callback值，如果有其它参数，则正常传递
第三步：请求成功返回之后，执行第一步中创建的函数(jQuery34109553463653123275_1565234364495)。这个函数最终会指向$.ajax({success:function(){}}) 中的success
第四步：销毁 第一步中创建的函数及第二步中创建的script标签

cors

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
app.get('/time', (req, res) => {
  // // 允许任意源访问，不安全
  // res.setHeader('Access-Control-Allow-Origin', '*')
  // 允许指定源访问
  res.setHeader('Access-Control-Allow-Origin', 'http://www.xxx.com')
  res.send(Date.now().toString())
})
这种方案无需客户端作出任何变化（客户端不用改代码），就当跨域问题不存在一样。
服务端响应的时候添加一个 Access-Control-Allow-Origin 的响应头
如果ajax请求中还附加了cookie，则还需要设置一句：res.setHeader('Access-Control-Allow-Credentials', 'true');

jsonp与cors的对比

jsonp：
不是ajax
只能使用get方式传参
兼容性好 

cors:
就是ajax
支持各种方式的请求(post,get....)
浏览器的支持不好