如何从客户端进行跨源资源共享?

时间:2017-05-12 08:27:52

标签: javascript cors fetch-api

我知道这个问题的标题毫无意义,因为客户不会分享任何东西,它要求。但是,说我想写一个RSS阅读器作为练习。所以我将所有数据存储在IndexedDB(或localstorage)中的客户端上,我想获取一些流。所以我举个例子

fetch('https://bunyk.wordpress.com/feed/')

但是wordpress.com不在我的控制之下,它给了我错误

  

请求时没有'Access-Control-Allow-Origin'标头   资源。

我可以使用{mode: 'no-cors'}来避免这个错误,但是这样我也无法获取内容。

有没有办法让它工作,或者我需要编写和托管一些代理请求并添加'Access-Control-Allow-Origin'标头的精简后端? (可能这样的代理已经存在于某个地方?)或者我可以使用Progressive Web Apps的功能,比如Service Workers吗?或者我应该使用像Electron或Cordova这样的东西?我想做的是让我的应用程序也可以在移动设备上运行。

1 个答案:

答案 0 :(得分:2)

你现在可以这样做:

fetch('https://cors-anywhere.herokuapp.com/https://bunyk.wordpress.com/feed/')

......它会起作用。

这导致请求https://cors-anywhere.herokuapp.com,一个开放/公共代理,然后将其发送到https://bunyk.wordpress.com/feed/。当该代理获得响应时,它将接受它并向其添加Access-Control-Allow-Origin响应头,然后将其作为响应传递回您的请求前端代码。

带有Access-Control-Allow-Origin响应标头的响应是浏览器看到的,因此浏览器引擎显示的错误消息现在消失了,浏览器允许您的前端JavaScript代码访问响应。

或者使用https://github.com/Rob--W/cors-anywhere/之类的代码来设置您自己的代理。