对预检请求的响应未通过访问控制检查:“Access-Control-Allow-Origin”标头包含多个值
Posted
技术标签:
【中文标题】对预检请求的响应未通过访问控制检查:“Access-Control-Allow-Origin”标头包含多个值【英文标题】:Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values 【发布时间】:2019-06-28 22:26:38 【问题描述】:我已经开发了 Woocommerce ionic 应用程序,但是当我将应用程序与实时站点或服务器连接时,它会给出这个错误:
Access to fetch at 'https://www.example.co.uk/shop/wp-json/v3/products/categories?filter[meta]=true&filter[variation]=true'
from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight
request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains
multiple values 'http://localhost:8100, *', but only one is allowed. Have the server send the
header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
请同时查看以下屏幕截图:
为解决此错误,我还将以下代码粘贴到我的服务器 .htaccess 文件中:
Header set Access-Control-Allow-Methods "HEAD, POST, GET, PUT, OPTIONS, PATCH, DELETE"
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Credentials "true"
Header set Access-Control-Allow-Headers "X-Accept-Charset,X-Accept,Content-Type,Credentials"
但它仍然显示相同的错误。
1 个月前它工作正常。 我正在使用 ionic CLI 版本是:3.4.0 和 npm 版本是:6.6.0
【问题讨论】:
【参考方案1】:这个问题主要发生在服务器端 尝试更改您的 .htaccess 文件
喜欢
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
参考来自 htaccess Access-Control-Allow-Origin
【讨论】:
感谢您的回复,我已经在服务器的.htaccess 文件中设置了这个Header set Access-Control-Allow-Origin "*"。但它仍然无法正常工作,仅显示正在加载...横幅。 请检查您的 config.xml 文件是否有这一行,否则添加它 没有任何名称为 config.xml 的文件,我使用的是 Wordpress 并且有 .htaccess 文件。我也添加了上面的代码,但仍然无法正常工作。【参考方案2】:根据错误信息,浏览器收到以下响应头:
Access-Control-Allow-Origin: http://localhost:8100, *
不允许在响应中指定多个来源,因此您会收到 CORS 错误。
您应该尝试了解是什么让您的服务器返回多个值。 我会:
-
尝试使用不带任何扩展程序的隐身模式,因为某些扩展程序可以
修改此标头。
在代码和 Apache 配置文件中搜索
任何带有
Access-Control-Allow-Origin
的行
【讨论】:
我已经通过禁用所有浏览器扩展进行检查,但仍然显示相同的错误。 当我们的站点从 http 更改为 https 时会出现此错误。 可能是您有一些仅适用于 https 的 CORS 配置以上是关于对预检请求的响应未通过访问控制检查:“Access-Control-Allow-Origin”标头包含多个值的主要内容,如果未能解决你的问题,请参考以下文章
对预检请求的响应未通过访问控制检查:“Access-Control-Allow-Origin”标头包含多个值
对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。
离子视图 - 对预检请求的响应未通过访问控制检查:没有“Access-Control-Allow-Origin”标头
对预检请求的响应未通过访问控制检查:请求的资源中不存在“Access-control-Allow-Origin”标头
请求的资源上不存在“Access-Control-Allow-Origin”标头。或 对预检请求的响应未通过访问控制检查