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

Question

I am working on getting a data through a URL with GET method available. 我正在尝试通过具有GET方法的URL获取数据。 I have used the Jquery to get the JSON and parse it into HTML table. 我使用了Jquery来获取JSON并将其解析为HTML表。

However, I cannot fix the CORS issue. 但是，我无法解决CORS问题。 I have added the code: 我添加了代码：

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');

I have also installed the chrome extension to enable CORS. 我还安装了chrome扩展程序以启用CORS。

However, none of them worked. 但是，它们都不起作用。 I have also tried to use XMLHttpRequest directly, it still doesn't work... 我也尝试过直接使用XMLHttpRequest，它仍然无法正常工作...

Here is my code using Jquery: 这是我使用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>

It always shows the error message of No 'Access-Control-Allow-Origin' header is present on the requested resource. 它总是显示请求的资源上不存在“ Access-Control-Allow-Origin”标头的错误消息。 Origin 'null' is therefore not allowed access. 因此，不允许访问原始“空”。

And is my code using HTTP Request directly, which is based on this article: https://www.html5rocks.com/en/tutorials/cors/ 这是我的代码直接基于本文的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>

This one doesn't have error message but has no outcome at all... Is there anyone have some thoughts? 这个没有错误消息，但根本没有结果...有没有人有想法？ Any feedback is welcomed!!! 欢迎任何反馈！！！ Thanks a lot in advance! 在此先多谢！

Answer 1

CORS should be supported on the server. 服务器应支持CORS。 In case of sending cross-domain request, jQuery adds Origin: http://example.com header to request and expects Access-Control-Allow-Origin: http://example.com or Access-Control-Allow-Origin: * header in response . 在发送跨域请求的情况下，jQuery向请求添加Origin: http://example.com标头，并期望Access-Control-Allow-Origin: http://example.com或Access-Control-Allow-Origin: *标头响应。

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

PS Regarding FIXCORS function in your script, I assume you have copied that from some Node.js CORS guide, it should be place on the server as well PS关于脚本中的FIXCORS函数，我假设您已经从某些Node.js CORS指南中复制了它，它也应该放在服务器上

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

问题描述

1 个解决方案

解决方案1
1 2017-06-22 13:23:19

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

问题描述

1 个解决方案

解决方案1 1 2017-06-22 13:23:19

解决方案1
1 2017-06-22 13:23:19