跨域的几种方案以及实现（JSONP，CORS，服务器端跨域）_综合

同源政策：如果两个页面拥有相同的协议、域名和端口则同源，如果其中有一个不一样就是不同源。
同源政策是为了保证用户信息安全，防止恶意的网站窃取数据，在同源政策下无法向非同源地址发送Ajax请求。

跨域：为了解决同源限制问题，主要有JSONP、CORS和服务器端跨域几种方法

JSONP （json with padding）：不属于Ajax请求，但可以模拟Ajax请求。实现要点如下：

将非同源服务器端的请求地址写在script标签的src属性中

   <script src="http://localhost:3001/test"></script>

服务器端响应数据必须是一个函数的调用，要发送给客户端的数据需要作为函数调用的参数

const data = 'fn({name: 'lisi', age: 20})'

在客户端全局作用下定义函数fn

function fn (data) {
    
}

在fn函数内部对服务器端返回的数据进行处理

function fn (data) {
    console.log('客户端的fn函数被调用了')console.log(data);
}

jsonp封装函数

function jsonp(options){
    //动态创建script标签var script = document.createElement('script') //需要传递的参数拼接var params = ''for(var item in options.data){
    params += '&'+ item + '=' + options.data[item] }//注册全局函数，使得调用jsonp时不用在外部定义函数；保证每次请求函数名的唯一性var fnName = 'Jsonp0fn' + Math.random().toString.replace('.','')window[fnName] = options.success//为script标签添加带函数名的src属性script.src = options.url +'?callback=' + fnName + params// 将创建好的script标签添加到页面中document.body.appendChild(script)// 加载完成后删除该script标签script.onload = function(){
    document.body.removeChild(script)}}jsonp({
    data: {
    'name':'zhangsan','age':'19' },url: 'http://localhost:3001/better',success: function (res) {
    console.log('请求成功');console.log(res);}
})

CORS （cross-origin resource sharing）：跨域资源共享，它允许浏览器向跨域服务器发送Ajax请求。

在服务器端的响应头中设置'Access-Control-Allow-Origin'指定可以访问自身的客户端地址
在服务器端的响应头中设置'Access-Control-Allow-Methods'指定可以进行访问的方法

app.get('/cross', (req, res) => {
    res.send('ok')
});// 拦截所有请求
app.use((req, res, next) => {
    // 1.允许哪些客户端访问我// * 代表允许所有的客户端访问我// 注意：如果跨域请求中涉及到cookie信息传递，值不可以为*号 比如是具体的域名信息res.header('Access-Control-Allow-Origin', 'http://localhost:3000')// 2.允许客户端使用哪些请求方法访问我res.header('Access-Control-Allow-Methods', 'get,post')// 允许客户端发送跨域请求时携带cookie信息res.header('Access-Control-Allow-Credentials', true);next();
});

客户端正常发送Ajax请求

ajax({
    type: 'get',url: 'http://localhost:3001/cross',success: function (data) {
    console.log(data)}
})

服务器端跨域：同源政策是浏览器给Ajax技术的限制，服务器端不存在同源政策限制。所以我们可以让A服务器端访问B服务器端，再将访问到的数据响应给A客户端，从而实现A客户端访问B服务器端数据的目的。

在这里插入图片描述

在A服务器端通过第三方模块request向B服务器端发送请求

// 引入向其他服务器端请求数据的模块
const request = require('request');
app.get('/server', (req, res) => {
    //向B服务器发起请求request('http://localhost:3001/cross', (err, response, body) => {
    res.send(body);})
});

在A客户端中通过Ajax访问A服务器中响应到的B服务器端的数据

ajax({
    type: 'get',url: 'http://localhost:3000/server',success: function (data) {
    console.log(data);}
})