跨域

最新推荐文章于 2024-08-12 09:41:26 发布

「已注销」

最新推荐文章于 2024-08-12 09:41:26 发布

阅读量159

点赞数

分类专栏： JavaScript知识点总结

本文链接：https://blog.csdn.net/gl767077147/article/details/79306577

版权

JavaScript知识点总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

什么是跨域

只要协议、域名、端口有任何一个不同，都被当作是不同的域，之间的请求就是跨域操作，如果请求的数据不是同源，则请求会报错。
这里写图片描述

与http://www.baidu.com:8080/index 做对比

url	结果	原因
http://www.baidu.com:8080/index2	同源	协议号主机名端口号相同
https://www.baidu.com:8080/index	不同源	协议号不同
http://www.jingdong.com:8080/index	不同源	主机名不同
http://www.baidu.com:8000/index	不同源	端口号不同

跨域方法

JSONP

JSONP的跨域方法是用script标签内联的形式来跨域。
以请求 https://api.douban.com/v2/book/1220562 为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="public/javascripts/jquery-3.2.1.min.js"></script>
</head>
<body>
    <script>
        function cb(data){
            console.log(data);
        }

    </script>
    <script src="https://api.douban.com/v2/book/1220562?callback=cb"></script>
</body>
</html>

这里我们预先定义了函数cb，从api传来的数据会进入cb函数中，然后执行
执行结果:
这里写图片描述

当然 jQuery 也封装了jsonp跨域方法

$.getJSON('https://api.douban.com/v2/book/1220562?callback=?', function(json, textStatus) {
                /*optional stuff to do after success */
                console.log(json)
         });

这里getJSON方法可以不用预先定义函数，从api返回的数据会直接执行后面的function(json,textStatus)

服务器代理

之前我想跨域使用JSONP访问图虫的API https://api.tuchong.com/feed-app,但是返回的数据是纯json格式，所以不支持JSONP方法获得数据。所以只能用服务器代理(用express搭建服务器)，具体方法如下:

1.安装依赖

这里写图片描述
这里引入 http-proxy-middleware 组件，并且作用中间件就可以代理 https://api.tuchong.com/，这里我们的端口号为http://localhost:8000,这里我们使用 http://localhost:8000/feed-app 就可以访问到我们图虫的api地址并且拿到数据。

2.前台

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <!-- <h1><%= title %></h1>
    <p>Welcome to <%= title %></p> -->
    <button id="btn">CLICK ME</button>
    <script src="/javascripts/jquery-3.2.1.min.js"></script>
    <script>
        jQuery(document).ready(function($) {
         $('#btn').click(function(event) {
             /* Act on the event */
             $.ajax({
                 url: 'http://localhost:8000/feed-app',
                 type: 'get',
                 dataType: 'json',
             })
             .done(function(data) {
                 console.log(data);
             })
             .fail(function() {
                 console.log("error");
             })
             .always(function() {
                 console.log("complete");
             });

         }); 
        });
    </script>
  </body>
</html>

效果:
这里写图片描述

window.name

window 对象中有一个name属性，该属性的特征：即在一个窗口(window)的生命周期内，窗口载入的所有的页面都是共享一个window.name。
比如一个页面为 1.html，代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        window.name = '1.html 的值';
        setTimeout(function(){
            window.location = '2.html';
        },2000);
    </script>
</body>
</html>

页面2.html，代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(window.name);
    </script>
</body>
</html>