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

阳阳羊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，欢迎大家学习指正！

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

相关推荐
好开心3311 分钟前
axios的使用
开发语言·前端·javascript·前端框架·html
Domain-zhuo20 分钟前
Git常用命令
前端·git·gitee·github·gitea·gitcode
开发者每周简报27 分钟前
求职市场变化
人工智能·面试·职场和发展
菜根Sec1 小时前
XSS跨站脚本攻击漏洞练习
前端·xss
m0_748257181 小时前
Spring Boot FileUpLoad and Interceptor（文件上传和拦截器，Web入门知识）
前端·spring boot·后端
桃园码工1 小时前
15_HTML5 表单属性 --[HTML5 API 学习之旅]
前端·html5·表单属性
百万蹄蹄向前冲2 小时前
2024不一样的VUE3期末考查
前端·javascript·程序员
Anlici2 小时前
three.js建立3D模型展示地球+高亮
前端·数据可视化·canvas
轻口味2 小时前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami2 小时前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀0419个Web前端交互式3D JavaScript框架和库05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07Cube-Studio：开源大模型全链路一站式中台08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10组基轨迹建模 GBTM的介绍与实现（Stata 或 R）