对预检请求的响应未通过访问控制检查:“ Access-Control-Allow-Origin”标头包含多个值

时间:2019-02-05 06:20:39

标签: angularjs cors ionic3

我已经开发了Woocommerce离子应用程序,但是当我将该应用程序与实时站点或服务器连接时,就会出现此错误

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.

请同时查看以下屏幕截图: enter image description here

要解决此错误,我还将以下代码粘贴到了服务器.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

2 个答案:

答案 0 :(得分:0)

根据错误消息,浏览器将收到以下响应标头:

Access-Control-Allow-Origin: http://localhost:8100, *

不允许在响应中指定多个来源,因此会出现CORS错误。

您应该尝试了解是什么使您的服务器返回多个值。 我会:

  1. 尝试使用无任何扩展名的隐身模式,因为某些扩展名可能 修改此标头。
  2. 在代码和Apache配置文件中搜索以下内容 Access-Control-Allow-Origin
  3. 的任何行

答案 1 :(得分:0)

此问题主要发生在服务器端 尝试更改您的.htaccess文件

喜欢

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule> 

请参阅 htaccess Access-Control-Allow-Origin