本地Ajax跨域訪問 No 'Access-Control-Allow-Origin' header is present on the requested resource.
XMLHttpRequest cannot load http://lefeier.net/storemessage.php. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ is therefore not allowed access.
查了一翻資料，發現原來是新W3C標準中是這樣規定的：
最新的W3C標準裡是這麼實現HTTP跨域請求的， Cross-Origin Resource Sharing
簡單的來說，就是跨域的目標伺服器要返回一系列的Headers，通過這些Headers來控制是否同意跨域。這些Headers有：4 Syntax
4.1 Access-Control-Allow-Origin HTTP Response Header
4.2 Access-Control-Max-Age HTTP Response Header
4.3 Access-Control-Allow-Credentials HTTP Response Header
4.4 Access-Control-Allow-Methods HTTP Response Header
4.5 Access-Control-Allow-Headers HTTP Response Header
4.6 Origin HTTP Request Header
4.7 Access-Control-Request-Method HTTP Request Header
4.8 Access-Control-Request-Headers HTTP Request Header
在 Request 包和 Response 包中都有一些。
其中最敏感的就是 Access-Control-Allow-Origin 這個 Header, 他是W3C標準裡用來檢查該跨域請求是否可以被通過。 (Access Control Check)
跨域實現的過程大致如下:
如果 伺服器B返回一個如下的header
Access-Control-Allow-Origin: http://www.a.com
如上所知，總結解決辦法如下：
1、如果請求的url是aspx頁面，則需要在aspx頁面中新增程式碼：Response.AddHeader(“Access-Control-Allow-Origin”, “*”);
2、如果請求的url是PHP頁面，則需要在PHP頁面中新增程式碼：header(“Access-Control-Allow-Origin: *”);
3、如果請求的url是靜態的html頁面，則需要在頁面中新增meta標籤程式碼：
如果伺服器端可以確定是要被哪些域名訪問，最好是能把以上程式碼中的“*”代替為具體的域名，這樣做可以相應的增強安全性。
在php程式碼中新增 header(“Access-Control-Allow-Origin: http://localhost:3000“);後測試成功，寫localhost同樣很危險，但是開發過程中應該不會出現這樣的情況，肯定是具體的域名。
實現跨域的主要程式碼，做IE瀏覽器相容，最簡單的方法是檢查是否存在withCredentials屬性，再配合檢查XDomainRequest 物件是否存在。
<form id="leave-comment" class="comment-form">
<label for="comment">COMMENT*</label>
<textarea id="comment" name="comment" rows="4" cols="40"> </textarea>
<label for="nickname">NICKNAME</label>
<input type="text" name="nickname" id="nickname">
<label for="email">EMAIL* </label>
<input type="text" name="email" id="email" placeholder="Your email will not be published">
<label for="url">WEBSITE</label>
<input type="text" name="url" id="url" placeholder="http://">
<button id='submit-btn'>POST COMMENT</button>
</form>JavaScript部分
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
xhr = null;
}
return xhr;
}
function handleSend() {
var request = createCORSRequest("post", "http://lefeier.net/storemessage.php");
if (request) {
request.onload = function() {
console.log(request.responseText);
};
request.onerror = function() {
alert("An error occurred.");
};
request.send(new FormData(document.getElementById('leave-comment')));
}
}
var btn = document.getElementById('submit-btn');
btn.addEventListener('click', function(event) {
event.preventDefault();
handleSend();
});