码迷,mamicode.com
首页 > Web开发 > 详细

解决AJAX跨域问题

时间:2019-11-03 11:08:37      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:com   eth   device   表单   ons   img   access   display   cal   

就目前所知,form表单和jsonp貌似都不存在跨域问题,具体原理有待进一步研究。

试验过,得知AJAX跨域不了。

解决办法1:设置header头

const http = require(http);

let allowOrigin={
    //允许进行ajax跨域请求的地址
    http://localhost:true,
    http://aaaaaaaaaaaaaaa.com:true,
}

http.createServer( (req,res)=>{
    let {origin} = req.headers;
    if(allowOrigin[origin]){
        res.setHeader(access-control-allow-origin,*);
    }

    res.write({"a":12, "b":"blue"});
    res.end();
    
}).listen(8520);

通过req.headers获取其header头信息,紧接着判断该地址是否为true,为true则进行授权,这样子ajax的跨域问题就解决了。

贴前端代码:

技术图片
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    window.onload = function(){
        let oBtn = document.getElementById(btn1);

        oBtn.onclick = function(){
            let ajax = new XMLHttpRequest();
            
            ajax.open(GET,http://localhost:8520/kuayu,true);
            ajax.send();

            ajax.onreadystatechange=function(){
                // 0-4
                if(ajax.readyState==4){
                    if(ajax.status>=200&& ajax.status<300 || ajax.status==304){
                        alert(成功);
                        alert(ajax.responseText);
                    }else{
                        alert(失败);
                    }
                }
            }
        }
    }
    </script>
</head>
<body>
    <input type="button" value="请求" id="btn1" />
</body>
</html>
View Code

 

 

解决AJAX跨域问题

标签:com   eth   device   表单   ons   img   access   display   cal   

原文地址:https://www.cnblogs.com/comedy/p/11785079.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!