尝试从 url 获取文本文件数据时没有“Access-Control-Allow-Origin”

Posted

技术标签:

【中文标题】尝试从 url 获取文本文件数据时没有“Access-Control-Allow-Origin”【英文标题】:No 'Access-Control-Allow-Origin' when trying get data of Text File from url 【发布时间】:2019-12-19 06:26:30 【问题描述】:

我的网站包含主站点索引分析。 早些时候我在https://www.status.webcoder.sk 上的 php 中有它,但现在我试图在https://www.webcoderstatus.herokuapp.com 上的 nodejs 中做到这一点,但我有 1 个问题。

从 url 的文本文件中获取数据在 php 中没有问题,但是当我尝试使用 javascript 时,CORS 策略有问题。

我的代码是:

        function getText()
            var request = new XMLHttpRequest();
            request.open('GET', 'https://www.webcoder.sk/config/devices.txt', true);
            request.send(null);
            request.onreadystatechange = function () 
                if (request.readyState === 4 && request.status === 200) 
                    var type = request.getResponseHeader('Content-Type');
                    if (type.indexOf("text") !== 1) 
                        return request.responseText;
                    
                
            
        
        $(document).ready(function() 
            var devices = getText();
            console.log(devices);
        );

这是错误信息: (索引):1 从源“https://webcoderstatus.herokuapp.com”对“https://www.webcoder.sk/config/devices.txt”处的 XMLHttpRequest 的访问已被 CORS 策略阻止:请求的资源上不存在“Access-Control-Allow-Origin”标头。

【问题讨论】:

您必须将 CORS 策略添加到您的后端。您可以在标题中手动添加它,或者,由于您使用的是 nodejs,您可以安装 cors 模块并将 app.use(cors()) 放在您的服务器上。 是的,如果您无法控制webcoder.sk 后端,您应该从您的后端进行调用。这避免了所有 CORS 问题。 @MattKuhns 我可以控制 webcoder.sk How does Access-Control-Allow-Origin header work?的可能重复 @FZs 类似,但我一直在寻找很多这样的文章,但没有人帮助我,所以我不得不做这个并彻底描述它。 【参考方案1】:

问题

此错误是因为您的后端和前端位于不同的位置(也称为起源)。您的后端托管在https://www.webcoder.sk,您的前端托管在https://webcoderstatus.herokuapp.com。出于安全目的,浏览器会阻止跨不同来源的数据访问,并默认实施same-origin policy 策略。

解决方案

您需要做的是启用Cross Origin Resource Sharing,它只是告诉浏览器让运行在一个来源(域)的Web应用程序有权访问来自不同来源的服务器的选定资源。

如果您可以控制托管在 https://www.webcoder.sk 的后端 node.js 服务,那么这是添加 CORS 支持的简单方法。

首先将cors npm 包添加到您的node.js 后端,
npm install --save cors
然后像这样将中间件添加到您的启动文件中,
const express = require('express');
const cors = require('cors');

const app = express();
app.use(cors());

/*The rest of your routes*/

【讨论】:

我是否已将此代码添加到 app.js 和 index.js 或仅添加到其中一个文件? @WebCoder 只有其中之一。将其添加到您导入并使用express 模块的文件中,即base/starter/entry 文件 我添加到 app.js 并且应用程序正确启动,但出现相同的 cors 错误消息 不,我的后端没有托管在 webcoder.sk,只有我想阅读的文本文件。 webcoderstatus.herokuapp.com的nodejs托管在herokuapp.com

以上是关于尝试从 url 获取文本文件数据时没有“Access-Control-Allow-Origin”的主要内容,如果未能解决你的问题,请参考以下文章

从 google UserInfo 获取性别、生日、照片

有没有办法从 Alexa localisation.js 文件中存储在 s3 中的文本文件中获取字符串(数据)?

从 python 调用 url 时获取“错误”页面源

如何从此 URL 从文件中获取内容?

从包含 url 的文本文件中获取 url 的文件大小

我尝试从 multipart api 上传文件和文本数据,但即使我使用 multer 也无法获取文件