javascript - 使用 GET 方法的 Jquery 中的 CORS 问题

标签 javascript jquery ajax http get

我正在努力通过可用的 GET 方法通过 URL 获取数据。 我使用 Jquery 获取 JSON 并将其解析为 HTML 表。

但是,我无法解决 CORS 问题。我已经添加了代码:

res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header('Access-Control-Allow-Credentials', 'True');
res.header('Access-Control-Allow-Headers', 'accept, content-type, x-parse-application-id, x-parse-rest-api-key, x-parse-session-token');

我还安装了 chrome 扩展来启用 CORS。

但是,它们都不起作用。我也尝试过直接使用XMLHttpRequest,还是不行...

这是我使用 Jquery 的代码:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
 var url = 'https://www.probancemail.com/rest/v2/stats/RT1-PREM_DE?&token=5eX8dIljx9fWOvFu7WO22uL3EEYSN8PEciwZKdYqKxK6HOsHxjyYQpVBQiSLEGOJkId9wTNOAUpGRPfPWJgXV5u8s9EUL9hVeGSa'
function FIXCORS(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header('Access-Control-Allow-Credentials', 'True');
res.header('Access-Control-Allow-Headers', 'accept, content-type, x-parse-application-id, x-parse-rest-api-key, x-parse-session-token');
 // intercept OPTIONS method
if ('OPTIONS' == req.method) {
  res.send(200);
}
else {
  next();
}
};
$(document).ready(function () {
$.getJSON(url,
function (json) {
tr = $("<tr></tr>")
for (var i = 0; i < json.results.length; i++) {
var td = "<td>" + json.results[i].address_components[0].long_name+"</td>"
$(tr).append(td);
}
$('table').append($(tr));
});
});
</script>
</head>
<body>
<table></table>
</body>
</html>

它总是显示请求的资源上不存在“Access-Control-Allow-Origin” header 的错误消息。因此不允许访问源“null”。

我的代码是直接使用HTTP请求的,它基于这篇文章:https://www.html5rocks.com/en/tutorials/cors/

<!DOCTYPE html>
<html><meta charset="utf-8"/>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

function reqListener() {
console.log(this.responseText);
}
// Create the XHR object.
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// XHR for Chrome/Firefox/Opera/Safari.
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
// XDomainRequest for IE.
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// CORS not supported.
xhr = null;
}
return xhr;
}

// Helper method to parse the title tag from the response.
function getTitle(text) {
return text.match('/campaign');
}

// Make the actual CORS request.
function makeCorsRequest() {
// This is a sample server that supports CORS.
var url = 'https://www.probancemail.com/rest/v2/stats/RT1-PREM_DE?&token=5eX8dIljx9fWOvFu7WO22uL3EEYSN8PEciwZKdYqKxK6HOsHxjyYQpVBQiSLEGOJkId9wTNOAUpGRPfPWJgXV5u8s9EUL9hVeGSa';

var xhr = createCORSRequest('GET', url);
if (!xhr) {
alert('CORS not supported');
return;
 }

 // Response handlers.
xhr.onload = function() {
var text = xhr.responseText;
var title = getTitle(text);
alert('Response from CORS request to ' + url + ': ' + title);
 };

xhr.onerror = function() {
alert('Woops, there was an error making the request.');
};
 xhr.send();
}
</script>
</head>
<body>

<div id = "div"></div>
<button type = "button" onclick = "makeCorsRequest">Retrieve Report Data</button>

</body>
</html>

这个没有错误消息,但根本没有结果...... 有人有一些想法吗? 欢迎任何反馈! 预先非常感谢!

最佳答案

服务器应该支持 CORS。在发送跨域请求的情况下,jQuery 将 Origin: http://example.com header 添加到 request 中,并期望 Access-Control-Allow-Origin: 响应中的 http://example.comAccess-Control-Allow-Origin: * header 。

您可以在 MDN 上阅读有关 CORS 的更多信息:https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

附注关于脚本中的 FIXCORS 函数,我假设您已从某些 Node.js CORS 指南中复制了该函数,它也应该放置在服务器上

关于javascript - 使用 GET 方法的 Jquery 中的 CORS 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44700528/

相关文章:

java - 在 preventDefault 后重新触发事件

javascript - JavaScript 中相同类型和值的两个字符串在与关联数组匹配时不会计算为 true

javascript - 在同步 AJAX 调用期间更新 GUI

javascript - Mongoose 数据流

javascript - 切换开关 css

javascript - 如何重置 html 页面?

jquery - 如何在 jQuery Each 循环中获取输入的类?

javascript - 将 onchange 和 onclick 绑定(bind)在一起 jQuery 不起作用

javascript - Ajax 调用失败,但仅在特定的手机运营商上

javascript - 停止 Ajax 循环 JQuery