如何使用访问控制允许来源？它只是在html头标签之间吗？

Posted

技术标签:

【中文标题】如何使用访问控制允许来源？它只是在html头标签之间吗？【英文标题】：How do I use Access-Control-Allow-Origin? Does it just go in between the html head tags? 【发布时间】：2011-10-24 08:28:16 【问题描述】：

我一直在阅读有关 Access-Control-Allow-Origin 的信息，因为它似乎在允许跨域请求方面很有效，因为我可以访问外部站点。我的问题是如何使用Access-Control-Allow-Origin 来允许跨域请求。我试过这个（别笑）（顺便说一句，我想要一个数字，返回 1 或 0）

<html>
<head>
Access-Control-Allow-Origin: *
</head>
<body>
1
</body>
</html>

我接近了吗？谢谢你的帮助。如果有更简单的方法来执行简单的跨域请求，请告诉我。

【问题讨论】：

每个人首先要说的是服务器脚本。你有服务器吗？ 【参考方案1】：

允许跨域来源有3种方式（不包括jsonp）：

    使用 php 等模板语言直接在页面中设置页眉。请记住，标题之前不能有 HTML，否则会失败。

    修改服务器配置文件（apache.conf）并添加这一行。请注意，"*" 代表全部允许。某些系统可能还需要凭证集。一般来说，允许所有访问是一种安全风险，应该避免：

    标头集 Access-Control-Allow-Origin "*" 标头设置 Access-Control-Allow-Credentials true

    要允许 Apache Web 服务器上的多个域，请将以下内容添加到您的配置文件中

    SetEnvIf Origin "http(s)?://(www\.)?(example.org|example.com)$" AccessControlAllowOrigin=$0$1 标头添加 Access-Control-Allow-Origin %AccessControlAllowOrigine env=AccessControlAllowOrigin 标头集 Access-Control-Allow-Credentials true

    仅用于开发用途，仅破解您的浏览器并使用 Chrome Allow-Control-Allow-Origin extension 允许无限 CORS

    在 Chrome 中禁用 CORS：完全退出 Chrome。打开终端并执行以下命令。请注意您正在禁用网络安全：

    open -a Google\ Chrome --args --disable-web-security --user-data-dir

【讨论】：

本地开发最简单的方法就是添加cors扩展 无意中创建在测试中有效但在生产中神秘失败的代码的最简单方法是添加扩展。 ;) 您能否提供一个有关如何使用此扩展程序的示例？我没有让它工作，似乎没有任何文档。尽管我已经在“截获的 URL 或 URL 模式”设置中设置了远程地址，但我仍然通过开发工具看到消息，说明由于 CORS 访问已被阻止。还有一个“Access-Control-Expose-Headers”设置，我不知道它是干什么用的。我不知道这是我的错还是扩展程序不再工作了。 Access-Control-Allow-Credentials true 不适用于Access-Control-Allow-Origin 上的通配符。【参考方案2】：

这是一个 HTTP 标头。您将配置您的网络服务器或网络应用程序以理想地发送此标头。也许在 htaccess 或 PHP 中。

或者你也可以使用

<head>...<meta http-equiv="Access-Control-Allow-Origin" content="*">...</head>

我不知道这是否可行。并非所有 HTTP 标头都可以直接在 HTML 中配置。

这可以替代许多 HTTP 标头，但请参阅下面的 @EricLaw 评论。这个特定的标头是不同的。

警告

这个答案是关于如何设置标题的。我对允许跨域请求一无所知。

关于 HTTP 标头

每个请求和响应都有标头。浏览器将其发送到网络服务器

GET /index.htm HTTP/1.1

然后是标题

Host: www.example.com
User-Agent: (Browser/OS name and version information)
.. Additional headers indicating supported compression types and content types and other info

然后服务器发送响应

Content-type: text/html
Content-length: (number of bytes in file (optional))
Date: (server clock)
Server: (Webserver name and version information)

可以配置其他标头，例如Cache-Control，这完全取决于您的语言（PHP、CGI、Java、htaccess）和网络服务器（Apache 等）。

【讨论】：

它必须在 HTTP 标头中。在正文中支持它会是一个安全漏洞。 很高兴你提到它。我真的不知道这个跨域的东西是如何工作的。我将编辑我的答案。 感谢您的回答。现在我只是想找到一个让我更改 http 标头的网络主机。 这怎么能用 html 和 javascript 来完成。我有一个 html 页面通过 javaascript 调用另一个 html 页面。我没有使用任何可以修改标头的服务器端脚本。 试图改造 http 以确保安全似乎总是适得其反，而且大多是徒劳的。【参考方案3】： 
<?php header("Access-Control-Allow-Origin: http://example.com"); ?>

此命令仅禁用第一个控制台警告信息

console

结果： console result

【讨论】：

【参考方案4】：

如果您使用 Java 和 Spring MVC，您只需在返回页面的方法中添加以下注释：

@CrossOrigin(origins = "*")

"*" 是为了让您的页面可以从任何地方访问。 有关详细信息，请参阅https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin。

【讨论】：

以上是关于如何使用访问控制允许来源？它只是在html头标签之间吗？的主要内容，如果未能解决你的问题，请参考以下文章

如何绕过访问控制允许来源？

如何绕过访问控制允许来源？

如何绕过访问控制允许来源？

如何绕过访问控制允许来源？

ASP 中的访问控制允许来源

Firebase 存储和访问控制允许来源