本地Ajax跨域访问 No 'Access-Control-Allow-Origin' header is present on the requested resource.

问题和解决方法部分转自:http://zjblogs.com/js/Access-Control-Allow-Origin.html 感谢!
在本地用ajax跨域访问请求时报错:

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)

跨域实现的过程大致如下:

http://www.a.com/test.html 发起一个跨域请求,

请求的地址为: http://www.b.com/test.php

如果 服务器B返回一个如下的header

Access-Control-Allow-Origin: http://www.a.com

那么,这个来自 http://www.a.com/test.html 的跨域请求就会被通过。

如上所知,总结解决办法如下:

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();
    });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值