解决AJAX跨域问题

Posted 2020-12-01 Comedy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了解决AJAX跨域问题相关的知识，希望对你有一定的参考价值。

就目前所知，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跨域问题的主要内容，如果未能解决你的问题，请参考以下文章

如何解决ajax跨域问题（转）

ajax跨域问题解决思路

如何解决IE8下Ajax调用时跨域的问题

JQuery - Ajax和Tomcat跨域请求问题解决方法！

springmvc用@crossorigin解决跨域 ajax怎么写