请求接口时跨域问题，前端解决方法

Posted 2023-05-04

参考技术A

在前后端接口请求中，由于浏览器的限制，会出现跨域的情况。常用的跨域方案有：

1、JSONP跨域
2、nginx反向代理
3、服务器端修改header
4、document.domain
5、window.name
6、postMessage
7、后台配置运行跨域

当一个请求url的 协议、域名、端口 三者之间任意一个与当前页面url不同即为跨域

特别注意两点：
1、如果是协议和端口造成的跨域问题“前台”是无能为力的，
2、在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

加载本地文件时跨域请求被阻止

【中文标题】加载本地文件时跨域请求被阻止

【英文标题】：Cross-Origin Request Blocked when loading local file

【发布时间】：2021-12-19 07:36:27

【问题描述】：

我目前正在开发一个网站，但无法在 Firefox 中显示我的字体图标。除了 firefox 之外的所有浏览器都可以加载并显示我的字体图标，但在 firefox 上我收到以下错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/Users/Me/Desktop/website/resources/dist/css/fonts/themify.ttf. (Reason: CORS request not http).

文件的路径是正确的，因为当我输入上面列出的 URL 时，浏览器允许我下载文件。有人知道我为什么会收到此错误吗？

【问题讨论】：

您无法从 file:/// URI 加载所有类型的文件。相反，您应该将其托管在您机器上的某个 Web 服务器上（例如 Apace 或 IIS），然后在 localhost

上查看您的网站

使用浏览器直接访问计算机上的文件并要求远程网站加载它是完全不同的两件事。您的错误提示您通过http 访问远程站点，该站点尝试通过另一个协议file (which is not supported by CORS, see point 2) 访问文件。最简单的就是文件和网站托管在同一台服务器上，这样就可以通过http进行加载了

@DamianoMagrini 感谢您的提示。安装网络服务器成功了！

【参考方案1】：

Firefox 68 包含一个安全补丁，当您从 file:// URL 打开页面时，该补丁限制页面可以加载的文件类型（以及加载方法）。进行此更改是为了防止在本地页面范围内泄露有价值的数据，如可用的漏洞利用所示。更多信息：https://developer.mozilla.org/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp

我昨天提交了一个错误，建议允许使用字体，但实施需要时间。目前，您可以按如下方式回滚补丁：

(1) 在新选项卡中，在地址栏中键入或粘贴 about:config，然后按 Enter/Return。点击承诺小心或接受风险的按​​钮。

(2) 在列表上方的搜索框中，输入或粘贴 uniq 并在列表被过滤时暂停

(3) 双击privacy.file_unique_origin 首选项，将值从真切换为假

缓解漏洞：如果您将来自不受信任站点的页面保存在单独的文件夹中，例如，Downloads\Untrusted，那么攻击者将很难使用本地文件链接找到任何有价值的内容。

【讨论】：

这是一个很好的答案，但是如何访问与正在加载的“跨域请求”的 html/php 页面位于同一目录中的 Css 文件等内容。它们都在本地机器上的同一个文件夹中。可以理解从 CDN 加载 Js 库的 CORS 警告，该 CDN 是跨源但不是与根文档在同一台机器上的本地文件？

在尝试加载其他文件时，例如 *.xslt，您还必须将设置 security.fileuri.strict_origin_policy 设置为 false。至少这是我在 Firefox 77 中的经验 :)

@Piemol 这非常有帮助。在我将 security.fileuri.strict_origin_policy 设置为 false 之前，我什至无法让 .js 文件工作。

【参考方案2】：

如评论部分所述，我安装了一个网络服务器。在我的例子中，我使用了 tomcat8，使用它我甚至可以在 Firefox 中显示图标。

【参考方案3】：

解决本地预览时未加载网络字体的临时问题（应在下一个 68.0.2 Firefox 更新中修复）的最简单和安全的方法是安装 .ttf 或 .otf 版本并在您的@font-face 声明。在 Windows 上，转到 /Control Panel/Fonts/ 并检查字体的确切名称，复制到 local('') 值。

例子：

@font-face     
   font-family: 'Clear Sans';    
   font-style: normal;    
   font-weight: 700;    
   src: local('Clear Sans Bold'),    
      url('../fonts/woff2-convert/ClearSans-Bold.woff2') format('woff2'),    
      url('../fonts/WOFF/ClearSans-Bold.woff') format('woff'),     
      url('../fonts/TTF/ClearSans-Bold.ttf') format('truetype')