Code-Life icon indicating copy to clipboard operation
Code-Life copied to clipboard

浏览器跨域 header contains multiple values

Open Draymonders opened this issue 4 years ago • 2 comments

在开发isbn获取信息的功能时候遇到了如下bug

The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed

Draymonders avatar May 24 '20 16:05 Draymonders

基本信息

然后情况是这样的 isbn的请求那里是没有做跨域的,因此我是使用Nginx做代理,实现的跨域。 前端代码

fetch(url, {
  method: 'GET',
  mode: "cors",
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Credentials': 'true'
  }
}).then(res => res.json())
.then(res => {
  console.log(res)
  this.name = res.title
  this.price = res.abstract
  this.detail = res.book_intro
})

Nginx配置

server {
  add_header 'Access-Control-Allow-Origin' '*';
  add_header Access-Control-Allow-Origin $http_origin;
  location /isbn/ {
    proxy_pass https://book.feelyou.top/isbn/;    
  }
}

Draymonders avatar May 24 '20 16:05 Draymonders

解决方案

那个only one的意思是 只用设置一次allow origin, 但我代码里面发送请求设置了一次,且Nginx设置了一次,因此会出现请求无法得到响应的结果

最后处理就是可以把前端的headers删除 or Nginx配置中 add_header 注释掉

Draymonders avatar May 24 '20 16:05 Draymonders