8. 跨域请求

1. 什么是同源策略

同源策略是一种重要的安全策略，它限制了一个源加载的文档或脚本如何与来自另一个源的资源进行交互。源被定义为给定 URL 的协议、主机和端口三者的组合。如果这三者中有任何一个不同，那么两个页面就不属于同一个源。

例如，以下各种情况都会造成不同源：

• http://www.example.com 与 https://www.example.com （协议不同）
• http://www.example.com 与 http://api.example.com （主机名不同）
• http://www.example.com:80 与 http://www.example.com:8080 （端口不同）

2. 什么是跨域

跨域是指从一个域名的网页去请求另一个域名的资源，由于同源策略的限制，浏览器通常不允许跨域的 HTTP 请求。

3. 如何实现跨域请求

跨域请求可以通过几种方式实现：

3.1 CORS（Cross-Origin Resource Sharing，跨源资源共享）

CORS 是一种官方的跨域解决方案，它允许服务器使用额外的 HTTP 头来告诉客户端，它们允许来自不同源的资源进行访问。

服务器端设置例如：

app.use(cors()); // 对于 Express 服务器

// 或者自定义 HTTP 头
res.header("Access-Control-Allow-Origin", "*"); // 允许任何源访问

3.2 JSONP（JSON with Padding）

JSONP 是一种实现跨域请求数据的方法，利用了 <script> 标签的 src 属性没有跨域限制的特性。JSONP 请求的返回不是 JSON 格式，而是可执行的 JavaScript 代码。

客户端示例：

<script>
function handleResponse(data) {
  console.log(data);
}
</script>
<script src="http://www.example.com/api/data?callback=handleResponse"></script>

3.3 使用 Proxy

可以设置一个代理服务器来转发 HTTP 请求，从而避免浏览器的同源策略限制。这通常是后端实现的，所以前端开发者可能需要与后端开发者合作来配置代理服务器。

3.4 使用其他插件或库

有些插件或库，如 jQuery 和 Axios，也提供了解决跨域问题的方法和配置。

总结

跨域是网络开发中常见的问题，了解并掌握跨域的相关知识和解决方案，对于开发者来说是非常必要的。使用跨域解决方案时，也需要考虑到安全性，合理配置和使用跨域策略，防止不必要的安全风险。