Question

我正在使用React + Redux开发应用，并在JSON数据库中拥有Firebase数据库。为此，我尝试从有效网址fetch我的数据（从Firebase模拟器验证）

let firebase = 'https://******.firebaseio.com/**/*/***/*' 
    return (dispatch) => {
        return fetch(firebase)
            .then(res => res.json())
            .then(json => dispatch({ type: 'GET_JSON', payload: json }))
    }

这会向我返回错误：Fetch API cannot load https://console.firebase.google.com/project/****/database/data/**/*/***/*. Redirect from 'https://console.firebase.google.com/project/****/database/data/**/*/***/*' to 'https://accounts.google.com/ServiceLogin?ltmpl=firebase&osid=1&passive=true…ole.firebase.google.com/project/****/database/data/**/*/***/*' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我尝试了很多解决方案，例如添加到fetch的第二个参数{ mode: 'no-cors', credentials: 'same-origin'}，但是当我尝试这个时，我得到了Uncaught (in promise) SyntaxError: Unexpected end of input。

我错过了什么？

Answer 1

likely error that arise to  cors blocked when using firebase is
when you initiate a put or get request with an incomplete firebase url
e.g
// wrong form
 this.http.get('https://******.firebaseio.com/data')   //this will throw an exception

// correct form                                                    
  this.http.get('https://******.firebaseio.com/data.json')

Answer 2

我在 serviceworker 的 fetch 实现中遇到了这个问题

self.addEventListener('fetch', (e) => {

fetch(e.request) // valid arg && works with firebase

fetch(e.request.url) // valid arg but will cause access-control error!

}

Answer 3

对于允许跨域的简单请求，服务器只需要将Access-Control-Allow-Origin标头添加到响应中。

如果您有任何疑问，请参阅此文章

Cross-Origin XMLHttpRequest

Using CORS

Firebase Fetch - 无访问控制允许原点

3 个答案: