javascript - 如何实现客户端跨源资源共享?

标签 javascript cors fetch-api

我知道这个问题的标题没有意义,因为客户端不共享任何内容,它请求。但是,假设我想编写一个 RSS 阅读器作为练习。因此,我会将客户端上的所有数据存储在 IndexedDB (或本地存储)中,并且我想获取一些流。例如,我就是这么做的

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

但是 wordpress.com 不在我的控制范围内,它给了我错误

No 'Access-Control-Allow-Origin' header is present on the requested resource.

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

有什么方法可以让它工作,或者我需要编写和托管一些代理请求和添加 'Access-Control-Allow-Origin' header 的瘦后端? (可能这样的代理已经存在于某个地方?)或者我可以使用渐进式 Web 应用程序功能中的某些功能,例如 Service Workers?或者我应该使用 Electron 或 Cordova 之类的东西?我想做的是让我的应用程序也可以在移动设备上运行。

最佳答案

您现在可以执行以下操作:

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

…它就会起作用。

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

该响应为 Access-Control-Allow-Origin响应 header 是浏览器看到的内容,因此浏览器引擎向您显示的错误消息现在会消失,并且浏览器允许您的前端 JavaScript 代码访问响应。

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

关于javascript - 如何实现客户端跨源资源共享?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43932939/

相关文章:

javascript - 如何使 slider 响应(codepen)?

.htaccess - .htaccess 中的 header 设置 Access-Control-Allow-Origin 不起作用

c# - ASP.NET 中的 CORS 问题

javascript - 使用 Fetch Streams API 在不使用递归的情况下异步使用分块数据

javascript - webpack - 将每个 scss 编译成同名的 css 文件

javascript - knockout 在数组中设置可观察数组

javascript - 关于文本区域的更改 - ajax post

通过 HTTPS 的 CORS OPTIONS 请求失败

javascript - 如何使用 JavaScript 将表单数据发送到服务器

javascript - 异步等待不等待函数完成