尝试从 url 获取文本文件数据时没有 'Access-Control-Allow-Origin'
No 'Access-Control-Allow-Origin' when trying get data of Text File from url
我的网站有主站点索引分析。
之前我在 https://www.status.webcoder.sk but now I'm trying to do it in nodejs on https://www.webcoderstatus.herokuapp.com 的 PHP 中有它,但我有 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://www.webcoder.sk/config/devices.txt' from origin 'https://webcoderstatus.herokuapp.com”处的 XMLHttpRequest 的访问已被 CORS 策略阻止:请求的资源上不存在 'Access-Control-Allow-Origin' header。
问题
此错误是因为您的后端和前端位于不同的位置(a.k.a 来源)。您的后端位于 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*/
我的网站有主站点索引分析。 之前我在 https://www.status.webcoder.sk but now I'm trying to do it in nodejs on https://www.webcoderstatus.herokuapp.com 的 PHP 中有它,但我有 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://www.webcoder.sk/config/devices.txt' from origin 'https://webcoderstatus.herokuapp.com”处的 XMLHttpRequest 的访问已被 CORS 策略阻止:请求的资源上不存在 'Access-Control-Allow-Origin' header。
问题
此错误是因为您的后端和前端位于不同的位置(a.k.a 来源)。您的后端位于 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*/