js跨域请求的几种方式

1. 什么是跨域？
2. 跨域请求的方式？

js跨域：指的是在不同域之间进行数据交换与通信，js中默认只有在同源的情况下才能进行数据的传输。
同源：相同域名，端口，协议。

http://www.aaa.com
http://www.aaa.com/bbb //同源

jsonp

第一种解决跨域的方法：jsonp(json with padding)顾名思义就是数据填充。至于怎么填充，那就和html几个标签有关系了，script，link，img，iframe等，他们用到的原理都一样，都是由于这些标签不存在跨域请求限制。

    //再引入jquery的时候，这时我们就会用到跨域请求 当前我们访问的是非同源的服务器
    //此时映入jquery的cdn
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    //此时我们访问的本地的路径，在同源环境下请求数据
    <script src="./jsonp.js"></script>

通过src属性向服务器发送请求，在请求的url中传递一个函数类型的参数，如http://localhost:3000/callback=fn 服务器在接收到请求后 准备处理请求并把数据以函数调用的方式传递给客户端，如

//服务器端返回的数据
data:{
	name:'zhangsan',
	age:12
}
//注意这里传递的是json字符串 在客户端必须准备好一个fn函数的声明 用来接收传递过来的数据
//并且函数声明应该在引入之前，必须是全局函数
"fn(" +JSON.stringfiy(data)+")"

总结:jsonp是基于script不受同源策略的影响,可以向任何服务器地址发送请求,并且传递一个callback作为参数,服务器返回函数调用,并把数据以参数的形式传递给客户端。但是同时jsonp只能处理get请求，因为所有的参数都是通过url传递的

cros跨域资源共享

cros主要是对于服务器就行设置，以node后端为主

var express = require('express');
var app = express();
var allowCrossDomain = function (req, res, next) {
  //设置允许请求的源
  res.header('Access-Control-Allow-Origin', 'http://localhost:3001');
  //设置请求方式
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  //设置请求头信息
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
}
app.use(allowCrossDomain);

总结：cros的优点在于发送请求的方式不受限，相对与jsonp更加简单，只用后端做出相应的设置，缺点在于浏览器在发送真正的请求之前，会先发送一个 Preflight 请求给服务器，这种请求使用 OPTIONS方法，发送下列头部：

Origin: http://www.abc.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: token