当前位置：首页 > article >正文

前后端交互系列之跨域问题

article 2024/11/17 6:33:49

前言

我们在做前后端交互的时候，会遇到跨域问题。本节内容将带领读者了解什么是跨域问题，以及跨域问题的解决方法。

1. 同源策略及跨域

我们所了解的Ajax默认是基于同源策略的。它是浏览器的一种安全策略，所以我们如果要像很好的实现前后端交互，必须有相关知识的储备。

同源是什么：请求的协议与目标请求的资源，协议、域名、端口号必须完全相同。（可以理解为同一个来源）

跨域是什么，违背同源策略就是跨域。如果请求协议与目标请求的资源，协议、域名、端口号有一个不同，就是跨域。

2. 跨域解决方案之JSONP

JSONP是一个非官方的跨域解决方案，只支持get请求。

原理：在网页中有一些标签具有跨域能力，如img、link、iframe、script。
而JSONP就是利用script标签的跨域能力来发送请求的。

这里我们先来写一个简单的前台和后台：
前台代码：

<body>
    巧克力小猫猿
    <button class="btn">点击获取用户数据</button>

    <script>
        $(function() {
            $('.btn').click(() => {
                $.ajax({
                    url: 'http://127.0.0.1:8000/data',
                    type: 'GET',
                    sucess: function(data) {
                        console.log(data)
                    }
                })
            })
        })
    </script>
</body>
</html>

后台代码：

const express = require(`express`);

const app = express();

app.get('/home', (request, response) => {
    //响应一个页面
    response.sendFile('./index.html');
});

app.get('/data', (request, response) => {
    response.send('用户数据')
})

app.listen(8000, () => {
    console.log('服务已经启动')
})

目前是存在跨域问题的：因为网页协议是file协议，而我们ajax是http协议，是跨域请求。
在这里插入图片描述
解决方式：
首先安装liveserver插件，安装这个插件后，用liveserver打开网页：

以上，知晓原理就好。因为每一种方式有每一种jsonp的用法。但由于jsonp只用于发get请求，get请求又比较局限。稍作了解即可。（针对面试）

接下来我们会讲没有局限性的主流写法。

3. 设置CORS响应头实现跨域

利用CORS解决跨域问题是当前的主流方式。

CORS，跨域资源共享，是官方跨域的解决方案。特点是不需要在客户端作任何操作，完全在服务器中进行处理（前端无需操心，后端来操作）。且CORS支持get与post的请求。

CORS通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后会对响应放行。

所以现在我们来介绍跨域的响应头（之前系列的后台都有这个响应头），此响应头报错中也会有：
在这里插入图片描述

报错会告诉我们没有这个响应头，没有响应头加就对了，响应头是固定写法，右边表示针对哪些网页可以使用，*表示通配，表示所有网页都可以使用。
在这里插入图片描述
这里是代码部分：
前台：

<body>
    巧克力小猫猿
    <button class="btn">点击获取用户数据</button>

    <script>
        $(function() {
            $('.btn').click(() => {
                $.ajax({
                    url: 'http://127.0.0.1:8000/data',
                    type: 'GET',
                    sucess: function(data) {
                        console.log(JSON.parse(data))
                    }
                })
            })
        })
    </script>
</body>

后台：

app.get('/data', (request, response) => {
    //跨域响应头
    response.setHeader("Access-Control-Allow-Origin", '*')
    const data = {
        name: '巧克力小猫猿'
    };

    const str = JSON.stringify(data)
    response.send(str)
})