赶紧收藏！2024 年最常见 100道 Java 基础面试题（四十三）

最新推荐文章于 2024-05-21 22:13:42 发布

学长爱编程

最新推荐文章于 2024-05-21 22:13:42 发布

阅读量625

点赞数 25

分类专栏：后端研发 Java 基础程序员面试文章标签： java 开发语言面试软件工程跳槽后端改行学it

本文链接：https://blog.csdn.net/weixin_42922481/article/details/138794733

版权

后端研发同时被 3 个专栏收录

64 篇文章 1 订阅

订阅专栏

程序员面试

63 篇文章 1 订阅

订阅专栏

Java 基础

51 篇文章 1 订阅

订阅专栏

上一篇地址：赶紧收藏！2024 年最常见 100道 Java 基础面试题（四十二）-CSDN博客

八十五、如何实现跨域？

跨域（Cross-Origin Resource Sharing, CORS）是指在Web开发中，出于安全考虑，浏览器限制了来自与当前网站不同域名、端口或协议的资源请求。跨域问题通常发生在前端需要从不同的源（域名、协议或端口）请求数据时。以下是实现跨域请求的几种常见方法：

1. CORS响应头

CORS是一种标准的跨域解决方案，它通过在服务器响应中添加特殊的HTTP头来允许或限制某些类型的跨域请求。

Access-Control-Allow-Origin：这个响应头指定了哪些源可以访问资源。它可以设置为具体的域名，或者使用通配符*来允许所有源（不推荐在生产环境中使用，因为这会带来安全风险）。
Access-Control-Allow-Methods：指定允许的HTTP方法，如GET、POST等。
Access-Control-Allow-Headers：指定允许的自定义请求头。
Access-Control-Allow-Credentials：一个布尔值，指示浏览器是否应该将凭证（如cookies和HTTP认证相关数据）包含在跨域请求中。

2. JSONP（JSON with Padding）

JSONP是一种早期的跨域技术，它利用<script>标签可以跨域加载资源的特点。通过动态创建<script>标签，可以将服务端的数据作为JSONP调用返回。

实现步骤：
1. 客户端发送一个带有回调函数名的请求。
2. 服务器接收请求，并在响应中将数据包装在回调函数中。
3. 客户端解析响应并执行回调函数，从而获取数据。

3. 代理服务器

在客户端设置一个代理服务器，该服务器与前端应用同源。所有跨域请求都先发送到代理服务器，然后由代理服务器转发到目标服务器。这样，代理服务器接收响应并转发给客户端，实现了间接的跨域通信。

4. Web Messaging（如`window.postMessage`）

Web Messaging提供了一种在不同源间安全通信的方式。通过window.postMessage方法，不同窗口（或iframe）的JavaScript代码可以相互传递消息，即使它们源自不同的源。

5. 跨域资源共享（CORS）的预请求

在实际发送请求之前，浏览器会先发送一个预请求（preflight request），这通常是一个OPTIONS请求，用于询问目标服务器是否允许跨域请求。服务器需要在响应中确认允许跨域请求。

示例代码：

服务器端设置CORS（Node.js示例）：

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

app.get('/api/data', (req, res) => {
  res.json({ message: 'Success' });
});

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

客户端发送JSONP请求：

const script = document.createElement('script');
script.src = 'https://example.com/api/data?callback=myCallbackFunction';
document.head.appendChild(script);

function myCallbackFunction(data) {
  console.log(data);
}

注意事项：

使用CORS时，应谨慎设置Access-Control-Allow-Origin，避免使用通配符*，以减少安全风险。
JSONP存在安全风险，因为它允许执行从服务器返回的任意代码。
代理服务器需要正确处理跨域请求，并且可能会增加系统的复杂性。

总结：

跨域问题通常通过CORS、JSONP、代理服务器等方式解决。
CORS是推荐的方法，因为它提供了更安全和灵活的跨域访问控制。
在实现跨域请求时，应考虑安全性和性能，避免不必要的风险。

八十六、说一下`JSONP`实现原理？

JSONP（JSON with Padding）是一种在Web开发中用于绕过浏览器同源策略限制的技术。同源策略是浏览器的一种安全机制，它限制了从一个源加载的文档或脚本与另一个源的资源进行交互的能力。这意味着，如果两个页面的协议、域名或端口号不同，它们就不能通过JavaScript的XMLHttpRequest对象进行通信。

JSONP通过动态创建<script>标签来实现跨域请求。由于<script>标签不受同源策略的限制，可以加载来自不同域的脚本，因此可以利用这一点来绕过同源策略的限制。

JSONP的实现原理可以分为以下几个步骤：

客户端请求：客户端页面上有一个JSONP请求，通常是通过JavaScript创建一个<script>元素，并设置其src属性为需要请求的跨域服务的URL。
服务端响应：服务端接收到请求后，会识别出这是一个JSONP请求。服务端会将响应数据包装在一个事先约定好的回调函数中。例如，如果客户端请求中包含一个callback参数，服务端就会将数据放在这个回调函数的内部。
动态添加到DOM：客户端通过JavaScript将<script>标签添加到DOM中，这会导致浏览器发起对指定URL的请求。
回调函数执行：一旦服务端的响应（一个JavaScript脚本）被加载并执行，它内部的回调函数也会被执行，这个回调函数会处理JSONP响应中的数据。
数据使用：回调函数中可以定义如何处理接收到的数据，通常是用来更新DOM或执行其他操作。

下面是一个简单的JSONP请求和响应的例子：

客户端请求：

function jsonpCallback(data) {
  // 处理数据
  console.log(data);
}

var script = document.createElement('script');
script.src = 'http://example.com/api?callback=jsonpCallback';
document.head.appendChild(script);

服务端响应：

// 假设服务端接收到的callback参数是jsonpCallback
jsonpCallback({"name": "John", "age": 30});

在这个例子中，客户端定义了一个名为jsonpCallback的函数，然后创建了一个<script>标签，其src属性包含了服务端的URL和一个callback参数，该参数的值是客户端的回调函数名。服务端接收到请求后，将数据包装在jsonpCallback函数中，然后返回给客户端。客户端浏览器加载并执行这个脚本，jsonpCallback函数被调用，并且客户端可以处理返回的数据。

需要注意的是，JSONP存在一些安全和性能上的问题，比如它不支持POST请求，只能使用GET请求，而且由于它依赖于全局函数，可能会导致命名冲突。因此，在现代Web开发中，更推荐使用CORS（跨源资源共享）策略来实现跨域通信。