跨域小知识,小白看了都说悟了

771 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第7天,点击查看活动详情

一、跨域的导火线?

浏览器有一个重要的安全策略--同源策略,是浏览器最核心和最基本的安全策略。

如果没有同源策略,浏览器很容易遭受XSS、CSFR等攻击。

同源策略是指,若页面的源和页面运行过程中加载的源不一致时,出于安全考虑,浏览器会对跨域的资源访问进行一些限制。即协议+域名+端口三者相同,即使两个不同的域名指向同一个地址,也是非同源的。

image.png

同源策略会限制AJAX请求不能发送等操作。

二、跨域?

前后端进行数据交互的时候,经常会存在跨域错误。

跨域指的是,在前端领域中,浏览器允许服务器发送跨域清奇,从而克服浏览器的同源策略的限制;跨域错误指的是浏览器不能执行其他网站的脚本而发生错误。

跨域只会出现在浏览器上,小程序和APP开发不会有跨域问题。

举个例子:

前端代码:

        //这里是前端代码
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
        <button id="btn">get data</button>
        <script>
            let btn = document.getElementById('btn');
            btn.addEventListener('click', () => {
                $.ajax({
                    url: 'http://localhost:3000',
                    data: {
                        name: 'lucky'
                    },
                    method: 'get',
                    success(res) {
                        console.log(res);
                    }
                })
            })
        </script>

后端(node)主要的代码:

// 引入规范
//...const main = (ctx, next) => {
    console.log(ctx.query.name);
    // 往前端输出
    ctx.body = 'hi,good afternoon'
}
​
app.use(main)
​
// 监听一个端口
//...

image.png

当我们先将后端开启服务,然后在前端页面点击按钮向后端发请求,请求数据的时候,控制台报跨域错误。这个错误正是源于浏览器的安全机制---同源策略。

三、跨域通常发生在?

前端向后端发送接口请求,后端响应回来的数据,在浏览器接收到时被跨域机制拦截下来(限制跨域访问)。

四、解决跨域方案?

首先,我们的HTML文件都是这样的:

<button id="btn">get data</button>

其次,解决跨域,我们还需要知道,HTML5中,有三个标签允许跨域加载资源,也就是不受同源策略限制。

<link rel="stylesheet" href="xxx.css">
<script src="xxx.js?callback"></script>//只能走get请求
<img src="xxx.xxx" alt="">

而接下来的一些方法,就会在这个基础上,朝着这个方向去实现解决跨域的手段。

1、JSONP
(1)实现原理

首先,JSONP的思路是这样的:

利用script标签中的src属性加载资源时不受同源策略的影响这一特性解决跨域(需要前后端的契合)。

JSONP的做法是:当需要跨域请求时,不使用AJAX,转而生成一个script元素去请求服务器,由于浏览器并不阻止script元素的请求,这样请求可以到达服务器。服务器拿到请求后,响应一段JS代码,这段代码实际上是一个函数调用,调用的是客户端预先生成好的函数,并把浏览器需要的数据作为参数传递到函数中,从而间接的把数据传递给客户端。

从而,我们可以分清楚前后端分别要做的事情:

前端需要做的事情大底上是这样的:

(1)封装一个JSONP方法,该方法返回一个Promise对象。

(2)动态创建一个script标签,然后设置script标签的src属性,将跨域的API数据接口地址赋值给src,这个地址后面通过?拼接一个回调函数(如callback);最后让script标签生效。

(3)准备一个callback函数(后端会返回一个函数给前端),形参为要获取的目标数据(后端返回的数据)

(4)调用JSONP方法

如下大概框架:

1、封装一个JSONP方法:
const jsonp=(...)=>{
    return new Promise((...)=>{
        
        //利用JSONP方法发接口请求:
        //(1)凭空创建一个script标签,动态创建 script
        var script = document.createElement('script');
        //设置 script 的 src 属性,并设置请求地址
        script.src = 'http://localhost:3000/?callback=getData';
        // 让 script 生效
        document.body.appendChild(script);
        
        
        2、准备一个callback函数(后端会返回一个函数给前端)
        function callback(data){
            resolve(data)
        }
    })
}
​
//调用JSONP方法

后端需要做的事情大底上是这样的:

(1)后端收到请求以后,需要进行特殊的处理:把传递进来的回调函数的函数名与所需数据进行拼接,准备好数据返回给前端

(2)准备好数据以后,后端把准备好的数据通过HTTP协议返回给前端,前端再调用回调函数,对返回的数据进行操作

callback()//调用回调函数
(2)实现代码

接下来就看看,如何实现的吧~。这里是前端代码:

let btn = document.getElementById('btn');
// 封装一个JSONP方法
const jsonp = (url, params, cb) => {
    return new Promise((resolve, reject) => {
        // 利用JSONP方法发接口请求
        // 凭空创建script标签
        const script = document.createElement('script');
        params = {
            ...params,
            cb: cb
        }
        //为了不影响前端传来的参数个数
        const arr = Object.keys(params).map(key =>
            `${key}=${params[key]}`); //['name="lucky"','age="19"','cb:xxx']
​
        script.src = `${url}?${arr.join('&')}`; //http://localhost:3000?name="lucky"&age=19&cb:xxx
        document.body.appendChild(script);
​
        // 后端会返回一个函数给前端
        // 前端拿到的相当于:script.src==='callback('lucky is 19 years old!')'
        window[cb] = (data) => { //相当于在window上挂载了一个方法callback
            resolve(data)
        }
    })
}
btn.addEventListener('click', () => {
    // 调用JSONP方法,对后端传来的数据进行加工
    jsonp('http://localhost:3000', {
            name: 'lucky',
            age: 19
        }, 'callback')
        .then((res) => {
            console.log(res);
        })
})
​

后端主要代码:

//引入一些规范
​
const main = (ctx, next) => {
    console.log(ctx.query);
    const {
        name,
        age,
        cb
    } = ctx.query;
    const userInfo = `${name} is ${age} years old!`;
    const str = `${cb}(${JSON.stringify(userInfo)})`; //'callback()'
    // 往前端输出
    // ctx.body = 'hi,good afternoon'
    ctx.body = str;
}
​
//app监听一个端口
(3)使用JSONP的优点

使用JSONP比较简单,兼容性也比较好,可用于解决主浏览器的跨域数据访问的问题

(4)使用JSONP的缺点

JSONP 只支持发送get请求,发送请求的方法具有局限性,因为 script 标签只能使用 get 请求;

JSONP 需要后端配合返回指定格式的数据

2、Cors
(1)实现原理

CORS(Cross-origin resource sharing)跨域资源共享 。允许浏览器向跨源服务器发出XMLHttpRequest请求,从而解决跨域问题。后端开启==给前端一个通行证。

CORS需要浏览器和后端同时支持,而实现CORS哦通信的关键是后端。只要后端开启了CORS,就实现了跨域。

服务器设置对CORS的支持原理:服务器设置Access-Control-Allow-Origin就可以开启CORS,该属性表示哪些域名可以访问资源,若设置成了*,则表示所有网站都可以进行访问资源。 HTTP响应头之后,浏览器将会允许跨域请求。

也许有人会疑问,既然后端就可以开启CORS,跟前端有什么关系哦?实际上,使用CORS解决跨域问题,会在发送请求时出现两种情况,简单请求和复杂请求。

什么是简单请求?什么是复杂请求呢?

请求满足以下条件为简单请求

1)请求方式(Request Method)是 get/post/head
(2)请求头(Request Headers)包含字段可以有:Accept,Accept-Language,content-Language,Last-Event-ID,Content-Type,其中Content-Type的值只能是 application/x-www-form-urlencoded,text/plain,multipart/form-data。

不满足以上条件的自然就是复杂请求了,简单请求和复杂请求的区别在于,复杂请求会多发一次请求,也叫预请求,后端也会相应得做出预响应。预请求也存在跨域问题,只有预请求成功后,真实的请求才会执行。

我们接下来的请求将以简单请求为例:

(2)实现代码

前端实现:

let btn = document.getElementById('btn');
btn.addEventListener('click', () => {
    $.ajax({
        url: 'http://localhost:3000',
        data: {
            name: 'lucky',
            age: 19
        },
        headers: {
            // Accept: "application/json;charset=utf-8"//为了告诉后端,你返回的响应头的类型应该是xxx
            "Content-Type": "application/json;charset=utf-8"
        },
        //请求头方法
        method: 'get',
        success(res) {
            console.log(res);
        }
    })
})

后端实现:

// 原生JS实现
const http = require('http');
​
const server = http.createServer((req, res) => {
    // 开启cors
    // writeHead()后端在响应头中设置
    res.writeHead(200, {
        // 允许请求源,将域名地址加入白名单,例如http://127.0.0.1:5500
        "Access-Control-Allow-Origin": "*",
        // 允许发请求的方式
        "Access-Control-Allow-Methods": "GET,POST,PUT,OPTIONS",
        // 允许请求头的类型
        // 不管向浏览器返回什么类型都可以,浏览器不会拦截
        "Access-Control-Allow-Headers": "Content-Type"
    })
    res.end('hello cors');
})
//server监听一个端口
(3)使用CORS的场景

仅适用于开发环境

3、node的Proxy

目前常用方式,通过服务器设置代理 ,但是一般情况还是后台解决跨域,因为前台是上线之后是没有服务器的概念的。

(1)实现原理

同源策略是浏览器遵循的标准,而如果是服务器向服务器请求数据,就不需要遵循同源策略。于是,当前端向一个服务器请求数据时,在中间设置一个中间件---代理服务器,设置以后,就变成代理服务器向服务器请求数据了。

代理服务器需要做这些事情:

A.接受客户端请求

B.将请求转发给服务器

C.服务器给代理服务器响应数据

D.代理服务器件响应的数据转发给客户端

image.png

(2)实现代码

前端实现代码:

let btn = document.getElementById('btn');
btn.addEventListener('click', () => {
    $.ajax({
        url: 'http://localhost:3001',
        data: {
            name: 'lucky'
        },
        method: 'get',
        success(res) {
            console.log(res);
        }
    })
})

后端实现代码:

服务器:

// 服务器
// 引入规范const main = (ctx, next) => {
    // 往前端输出
    ctx.body = 'hi,good afternoon'
}
app.use(main)
​
// app监听一个3000端口

代理服务器:

// 代理服务器
// 原生JS实现
const http = require('http');
​
const server = http.createServer((req, res) => {
    // 开启cors
    // writeHead()后端在响应头中设置
    res.writeHead(200, {
        // 允许请求源,将域名地址加入白名单,例如http://127.0.0.1:5500
        "Access-Control-Allow-Origin": "*",
        // 允许发请求的方式
        "Access-Control-Allow-Methods": "GET,POST,PUT,OPTIONS",
        // 允许请求头的类型
        // 不管向浏览器返回什么类型都可以,浏览器不会拦截
        "Access-Control-Allow-Headers": "Content-Type"
    })
    // res.end('hello cors');// 向服务器请求数据
    const proxyReq = http.request({
        host: "127.0.0.1",
        port: '3000',
        path: '/',
        method: 'GET'
    }, proxyRes => {
        // console.log(proxyRes);
        proxyRes.on('data', result => {
            // console.log(result.tostring());
            res.end(result.toString())
        });
    }).end()
})
​
//server监听一个3001的端口

当服务器和代理服务器都启动时,前端请求数据,解决跨域问题。

(3)使用Proxy的场景

适用于开发环境