Draymonders / Code-Life

The marathon continues though.
27 stars 3 forks source link

浏览器跨域 header contains multiple values #36

Open Draymonders opened 4 years ago

Draymonders commented 4 years ago

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

The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed
Draymonders commented 4 years ago

基本信息

然后情况是这样的 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 commented 4 years ago

解决方案

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

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