2017-06-22 23 views
0

我正在使用GET方法通過URL獲取數據。 我已經使用Jquery獲取JSON並將其解析爲HTML表格。使用GET方法在Jquery中CORS問題

但是,我無法修復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'); 

我還安裝了用於啓用CORS的chrome擴展。

但是,他們都沒有工作。我也曾嘗試使用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> 

它總是顯示否「的錯誤信息訪問控制,允許-Origin'標題出現在請求的資源上。因此不允許原產地'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> 

這一次沒有錯誤消息,但沒有結果,在所有... 是否有任何人有有些想法? 歡迎任何反饋! 非常感謝!

+3

CORS頭文件需要在服務器**上設置**。 – Pointy

+0

@Pointy有沒有辦法在無法編輯服務器時修復CORS問題? (服務器屬於我們沒有權限修改的第三方) –

+0

否;這是基本的瀏覽器安全。如果有解決方法,這將是一個嚴重的瀏覽器錯誤,它會盡快修復。但是,您可以*做的是構建您自己的基於服務器的代理,因爲安全行爲僅在Web瀏覽器中。 – Pointy

回答

1

服務器應該支持CORS。在發送跨域請求的情況下,jQuery將Origin: http://example.com標頭添加到請求並且預計Access-Control-Allow-Origin: http://example.comAccess-Control-Allow-Origin: *標頭響應

您可以在MDN閱讀更多關於CORS:https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

附:關於腳本中的FIXCORS函數,我假設你已經複製了一些Node.js CORS指南,它應該放置在服務器上

+0

你好@hmnzr謝謝你的回覆!然而,這是一個thrid-party網站,我無法對其服務器進行更改....是否有其他解決方法,我可以使用令牌在URL中解析此JSON? –

+0

@xiaotingpeng這裏是一些選項如何避免服務器上的CORS https://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy嘗試檢查他們的服務器是否首先支持JSONP – hmnzr