面试官：你是如何解决跨域的？

阳阳羊2024-03-21 11:06

在近期的面试中，面试官针对我的项目，问到了 如何解决跨域？ 没答好，我想通过这篇文章，巩固一下这方面的知识，分享一下我对于这个问题的理解，希望也能对大家有所帮助。

我的回答

跨域我们需要从浏览器聊起，我们知道浏览器有一个同源策略，协议号-域名-端口号都相同才能叫同源，它的目的是确保数据安全。如果不是同源，那么后端返回给浏览器的数据被浏览器拦截下来，这就是跨域。

解决跨域的方式有很多种，在项目中我是通过 Cors 解决的。Cors 应该是目前比较常用的方式之一，它的原理是通过在响应头中添加一些额外的字段，如 Access-Control-Allow-Origin 字段，添加允许跨域的源，类似于设置白名单之类的操作。

还有一些其他的解决办法：

  • Jsonp 主要是借助了 <script> 标签上的 src 属性不受同源策略的影响这一机制。
  • Node代理 是指用 Node 服务器代理客户端和目标服务器之间的网络请求。服务器与服务器之间没有同源策略，Node 代理服务器监听客户端请求，转发给目标服务器，再接收响应发给客户端。
  • Nginx代理 的原理跟 Cors 差不多，常用于项目上线。
  • document.domain
  • postMessage

后面这些我只是了解过，还没有仔细研究。

稍微官方一点的描述

什么是跨域

跨域是指在 Web 开发中，当一个网页的源（origin）与另一个网页的源不同时，就会发生跨域。源由协议、域名和端口号组成。如果两个 URL 的协议、域名和端口号中任何一个不同，就被认为是跨域。

跨域限制是由浏览器实施的安全策略，它防止一个网页的脚本通过在其他网页的上下文中执行来窃取敏感信息或执行恶意操作。浏览器会限制跨域请求，例如通过 XMLHttpRequest 或 Fetch API 发送的跨域 HTTP 请求通常会被拒绝，除非目标服务器明确允许这样的请求。

模拟跨域

我们用 Fetch 模拟跨域，发请求向后端拿数据。

html 复制代码 
<button id="btn">获取数据</button>
<script>
    let btn = document.getElementById('btn');
    btn.addEventListener('click',()=>{
        fetch('http://localhost:3000')
        .then(res=>res.json())
        .then(data=>{
            console.log(data);
        })
    })
</script>

点击获取数据，控制台会报错，提示跨域。

Cors

跨源资源共享（CORS，或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其他源（域、协议或端口），使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。

实现

在后端响应头添加access-control-allow-origin字段提示允许这些源跨域。

js 复制代码 
const http = require('http');

const server = http.createServer((req, res) => {
    res.writeHead(200,{
        // 'access-control-allow-origin':'*'//允许所有源
        'access-control-allow-origin':'http://127.0.0.1:5501'//自己的前端
    })
    let data ={
        msg:'Hello world'
    }
    res.end(JSON.stringify(data));
});

server.listen(3000,()=>{
    console.log('Server is running on port 3000');
});

然后启动后端，再尝试发请求：

就能成功拿到数据。

Jsonp

JSONP（JSON with Padding）是一种解决跨域请求的方法，通常用于在浏览器中通过 <script> 标签获取跨域数据。JSONP的基本原理是利用了 <script> 标签的跨域特性，通过动态创建 <script> 标签来请求远程服务器的资源，从而绕过浏览器的同源策略。

实现

html 复制代码 
<button id="btn">获取数据</button>
<!-- <script src="http://localhost:3000?cb=callback"></script> -->
<script>
    function jsonp(url,cb){
        return new Promise(function(resolve, reject){
            const script = document.createElement("script");
            script.src = `${url}?cb=${cb}`;//http://localhost:3000?cb=callback
            document.body.appendChild(script);
            window[cb] = function(data){
                resolve(data);
            }
        })
    }
    let btn = document.getElementById('btn');
    btn.addEventListener('click',()=>{
        jsonp('http://localhost:3000','callback')
        .then(res=>{
            console.log('后端响应的数据:',res);
        })
    })
</script>

前端创建一个jsonp函数，当用户点击按钮时，就会创建一个 <script> 标签，并将传入的 URL 和回调函数名称拼接在一起，作为其 src 属性。浏览器就会立即向指定 URL 发请求，拿到的数据会被当做参数resolve出来，给then使用。

js 复制代码 
const Koa = require('koa');
const app = new Koa();

const main = (ctx)=>{
    const cb = ctx.query.cb
    const data = '给前端的数据'
    const str = `${cb}('${data}')`
    ctx.body = str
}
app.use(main)
app.listen(3000,()=>{
    console.log('server is running on port 3000');
});

后端根据前端发送请求，返回一个函数的调用，该函数是前端指定的回调函数，将数据作为参数传递给前端。

这样下来，前端就能成功拿到数据：

Jsonp 这种方式解决跨域的缺点是：

  • 需要后端配合
  • 只能发 GET 请求

Node代理

Node 代理是指使用 Node 编写的服务器应用程序，用于代理客户端和目标服务器之间的网络请求。通过 Node 代理，可以在服务器端拦截客户端发出的请求，并将这些请求转发到目标服务器，然后将目标服务器的响应返回给客户端。

实现

因为 Vite 是用 Node 写的，官方提供了一个代理的功能（详见Vite 官方中文文档 | server-proxy）

只需在 vite.config.js 文件中配置开发服务器的自定义代理规则：

js 复制代码 
//vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy:{
      '/api':{
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  },
})

这里我们将发给'/api'的请求转发到 target 路径下，即'http://localhost:3000'，vite 帮我们启动了一个 node 服务，且帮我们朝 target 路径发起请求，因为后端没有同源策略，所以，vite 中的 node 服务能直接请求到数据，再提供给前端使用。

html 复制代码 
<!-- app.vue -->
<script setup>
import { onMounted } from 'vue';
import axios from 'axios';

onMounted(()=>{
  axios.get('/api').then((res)=>{
    console.log(res)
  })
})
</script>

这里我们直接向'/api'路径发请求。

js 复制代码 
//app.js
const http = require('http');
const server = http.createServer((req, res) => {
    let data ={
        msg:'Hello node-proxy'
    }
    res.end(JSON.stringify(data)); //向前端返回数据
});
server.listen(3000,()=>{
    console.log('Server is running on port 3000');
});

成功解决跨域，拿到数据！

Nginx代理

Nginx代理是指使用Nginx作为反向代理服务器，接收客户端发来的请求，然后将这些请求转发到其他服务器上进行处理，并将处理结果返回给客户端。Nginx是一种高性能的Web服务器和反向代理服务器，因其性能优异、配置简单而被广泛应用于互联网领域。

实现

编辑 Nginx 的配置文件（nginx.conf）。

nginx.conf 复制代码 
server {
    listen       2222;
    server_name  localhost;
    
    location / {
        root   html;
        index  index.html index.htm;
    }

    location /api {
        proxy_pass  http://127.0.0.1:3000;
        add_header  Access-Control-Allow-Origin *;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

将 localhost:2222/api 路径下的请求转发到http://127.0.0.1:3000来代理，并且添加响应头 Access-Control-Allow-Origin *，设置白名单，允许跨域请求，这里类似 Cors 。

js 复制代码 
const http = require('http');
const server = http.createServer((req, res) => {
    let data ={
        msg:'Hello nginx-proxy'
    }
    res.end(JSON.stringify(data));
});
server.listen(3000,()=>{
    console.log('Server is running on port 3000');
});

后端提供数据

html 复制代码 
<button id="btn">获取数据</button>
<script>
    let btn = document.getElementById('btn');
    btn.addEventListener('click',()=>{
        fetch('http://localhost:2222/api')
        .then(res=>res.json())
        .then(data=>{
            console.log(data);
        })
    })
</script>

前端向 http://localhost:2222/api 发请求，将被 Nginx 反向代理到 http://127.0.0.1:3000

所有工作准备完毕，点击按钮，拿到数据，成功解决跨域

window.postMessage

window.postMessage 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为 https），端口号（443 为 https 的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

html 复制代码 
<h2>父级页面</h2>
<iframe src="http://127.0.0.1:5501/postMessage/child.html" id="iframe" width="100px" height="100px"></iframe>
<script>
    let iframe = document.getElementById('iframe');
    iframe.onload = function () {
        let data = {
            msg:'父页面的数据'
        }
        iframe.contentWindow.postMessage(JSON.stringify(data),'http://127.0.0.1:5501');
    }
    //监听子页面传过来的数据
    window.addEventListener('message',(e)=>{
        console.log(e.data);
    })
</script>

在父级页面中嵌入了一个 <iframe> 元素，当它加载完成，使用 contentWindow.postMessage() 方法，向 iframe 发送了一个消息，目标地址为 http://127.0.0.1:5501。并且监听有没有消息传回来。

html 复制代码 
<h2>子级页面</h2>
<script>
    window.addEventListener("message", function (e) {
        console.log(JSON.parse(e.data));
        if(e.data){
            setTimeout(()=>{
                window.parent.postMessage('子页面的数据','http://127.0.0.1:5501')
            },1000)
        }
    })
</script>

在子页面监听事件，当从任何来源收到消息时，会处理这个事件，打印数据，并一秒钟后会返回给父窗口一个消息。

当 iframe 加载完毕，拿到父页面的数据，一秒后回应父页面，父页面成功接收。

document.domain

通过设置 document.domain 属性，可以在 iframe 中实现跨域访问。当父级页面和子级页面的子域不相同时，浏览器会因为同源策略而阻止它们之间的通信。但是，如果两者的基础域名相同，我们可以通过设置 document.domain 将它们设置为相同的基础域名，从而绕过同源策略的限制。

html 复制代码 
<h2>子级页面children.html</h2>
<script>
    document.domain = '127.0.0.1';
    console.log('子页面接受：',window.parent.msg);
</script>
html 复制代码 
<h2>父级页面</h2>
<iframe src="http://127.0.0.1:5501/domain/child.html" width="100px" height="100px"></iframe>
<script>
    document.domain = '127.0.0.1';
    window.msg = '来自父页面的数据'
</script>

在子级页面访问父级页面中设置的变量 msg，这在非同源情况下是不允许的。但是由于设置了相同的 document.domain，浏览器会认为这两个页面位于相同的源（即 '127.0.0.1'），从而允许它们通信。

但是

document.domain 破坏了同源策略所提供的安全保护。它使浏览器中的源模型复杂化，导致互操作性问题和安全漏洞。现在已被弃用。（详见Document.domain - Web API 接口参考 | MDN (mozilla.org)）

还是推荐使用window.postMessage解决跨域，比较安全。

最后

以上就是一些我自己收集解决跨域的手段，总结不易，如果描述不当欢迎指出。希望能帮助到大家，如果这篇文章对您有帮助，希望能够点赞，收藏，评论！一键三连，这次一定哦~

已将学习代码上传至 github，欢迎大家学习指正！

技术小白记录学习过程，有错误或不解的地方还请评论区留言，如果这篇文章对你有所帮助请 "点赞 收藏+关注" ，感谢支持！！

相关推荐
阿伟来咯~26 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端31 分钟前
使用vite+react+ts+Ant Design开发后台管理项目（五）
前端·javascript·react.js
学前端的小朱34 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai43 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨44 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
独行soc2 小时前
#渗透测试#SRC漏洞挖掘#深入挖掘XSS漏洞02之测试流程
web安全·面试·渗透测试·xss·漏洞挖掘·1024程序员节
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解