Loading... # 什么是跨域 跨域（Cross-Origin）是指在Web开发中，一个域下的文档或脚本尝试去请求另一个域下的资源的情况。这里的“域”指的是因特网上的一个应用程序或网站的来源，包括协议（如http或https）、域名（如example.com）和端口号（如80或443）。当这三者中的任何一个不同时，就被视为是不同的域。 由于浏览器的同源策略（Same-Origin Policy），默认情况下，Web页面上的JavaScript脚本只能请求和获取与其相同域（即协议、域名和端口都相同）下的资源。同源策略是一种重要的安全措施，用来防止恶意网站读取或操作其他网站的数据。 跨域请求的常见场景包括： Web字体跨域：Web字体（如通过@font-face引用的字体）因版权保护需要，可能限制了跨域使用。 API请求：前端应用可能需要从另一个域名（API服务器）获取数据。 资源分享：如图片、视频、样式表等资源的共享和引用。 跨域问题可以通过以下几种方式解决或绕过： CORS（跨源资源共享）：通过服务器发送特定的HTTP响应头，如Access-Control-Allow-Origin，明确告诉浏览器允许某些跨域请求。 JSONP（JSON with Padding）：利用<script>标签没有跨域限制的特性进行跨域请求。这种方法只能用于GET请求。 代理服务器：在同源的服务器上设置一个代理，接收前端的请求，然后转发到其他域的服务器上，再将响应返回给前端。这样，前端脚本实际上是与同源的代理服务器通信，绕过了同源策略的限制。 文档域（document.domain）：当两个不同的子域想要进行通信时，可以通过设置document.domain为它们的共同顶级域名来实现。 Web消息（Web Messaging / postMessage）：允许来自不同源的窗口之间传递消息。 跨域是现代Web开发中常见的问题，理解和正确处理跨域请求对于保证应用功能和安全至关重要。 # nginx允许跨域的配置 ``` location / { # 允许所有域名访问 add_header 'Access-Control-Allow-Origin' '*'; # 允许的方法 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; # 控制哪些头部信息可以暴露给外部 add_header 'Access-Control-Allow-Headers' 'User-Agent,Keep-Alive,Content-Type'; # 预检请求的缓存时间（秒） add_header 'Access-Control-Max-Age' 1728000; # 允许发送Cookie add_header 'Access-Control-Allow-Credentials' 'true'; # 处理OPTIONS预检请求 if ($request_method = 'OPTIONS') { return 204; } } ``` 最后修改：2024 年 05 月 11 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏