Express 4.x 使用CORS跨域的详细解析

最新推荐文章于 2024-05-08 00:59:40 发布

sunq1982

最新推荐文章于 2024-05-08 00:59:40 发布

阅读量1.4w

点赞数 2

本文链接：https://blog.csdn.net/sunq1982/article/details/77887655

版权

前两天在stackoverflow里面提问res.jsonp的用法，被回答者嘲讽：现在是2017年了，还用jsonp? 用CORS跨域啊。

做为一名傻傻的业余爱好者，不明就里，居然问：是什么技术取代jsonp在CORS跨域里面使用？估计回答的人已经吐血了，说：CORS就是一门技术。

后来自己去翻关于各方面CORS的技术博客，现在稍微懂了一点，在此做个笔记。

jsonp是属于比较老的技术，HTML5 支持跨域以后，就变成了CORS技术。这是内置于http协议本身的。所以自然用起来更流畅，更舒心。

先来看一个客户端的AJAX吧

这是向服务端localhost:2000提出ajax传输数据的申请，并且把响应显示在浏览器上。
这个html网页本身是被设置运行在localhost:1338的静态网页。
按照同源的规则，这两个虽然域名相同，但是端口不一样所以是非同源网站。

<!DOCTYPE html>
<html lang="en">

<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>Jsonp example</title>
    <script type="text/javascript" src="./jquery/dist/jquery.js"></script>
    <script type="text/javascript">
        function clickIt() {
    
            var cors = document.getElementById('cors');
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://localhost:2000', true);
            xhr.onload = function (e) {
    
                document.getElementById("result").innerHTML = xhr.responseText;

            };
            xhr.send('this is a CORS request!');
        }

最低0.47元/天解锁文章

sunq1982

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
9
评论
Express 4.x 使用CORS跨域的详细解析

前两天在stackoverflow里面提问res.jsonp的用法，被回答者嘲讽：现在是2017年了，还用jsonp? 用CORS跨域啊。做为一名傻傻的业余爱好者，不明就里，居然问：是什么技术取代jsonp在CORS跨域里面使用？估计回答的人已经吐血了，说：CORS就是一门技术。后来自己去翻关于各方面CORS的技术博客，现在稍微懂了一点，在此做个笔记。 jsonp是属于比较老的技术，HTML5
复制链接

扫一扫