专栏首页小康的自留地四、实现跨域访问

四、实现跨域访问

同源策略

同源:协议相同、域名相同、端口号相同

如果非同源那么将收到的限制:

  • Cookie、LocalStorage和IndexDB无法读取
  • DOM无法获得
  • AJAX请求不能发送

互联网默认原则:同源策略(不允许跨域访问)

常见跨域

  • link元素
  • script元素
  • img元素
  • iframe元素

JSONP

通过动态创建 script 标签,通过 script 标签的 src 请求没有域限制来获取资源

例如在 html 页面中,将 script 标签地址改为后端接口。

网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同原政策限制;服务器收到请求后,将数据放在一个指定名的回调函数里传回来。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function fn(data) {
            console.log(data);
        }
    </script>
    <script src="http://127.0.0.1:3000?callback=fn"></script>
</body>

</html>
const http = require("http");

const hostname = "127.0.0.1";
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader("Content-Type", "text/plain");
  res.end('fn({"msg":"Hello world"})');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

getJSON方法

$.getJSON('http://127.0.0.1:3000?callback=?',function(){
    console.log(data);
})

调用的函数名jQuery会自动生成。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<body>
    <script>
        $.getJSON('http://127.0.0.1:3000?callback=?', function (data) {
            console.log(data);
        })
    </script>

</body>

</html>
const http = require("http");

const hostname = "127.0.0.1";
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader("Content-Type", "text/plain");
  var urlObj = require("url").parse(req.url);
  var functionName = urlObj.query.split("&")[0].split("=")[1];
  console.log(functionName);
  res.end(`${functionName}({"msg":"Hello world"})`);
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

jQuery会自动生成回调函数的名称。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 通过JSONP实现跨域访问

    说到跨域访问就要谈到浏览器的同源策略,所谓同源指的就是协议相同、域名相同、端口号相同,三个条件必须全部匹配,否则就会收到限制,例如:

    Dreamy.TZK
  • 六、中间件与跨域

    在路由相应之前就会执行中间件的内容,例如在中间件中进行赋值,这种就可以在路由执行时使用这个值。

    Dreamy.TZK
  • jQuery原理(原型上的属性、方法)

    jQuery存在两个each方法,一个类方法,一个对象方法。当实现类方法时,只需要让对象方法调用类方法即可实现。

    Dreamy.TZK
  • AngularJS实现跨域请求

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • Go 语言网络编程系列(五)—— HTTP 编程篇:HTTP/HTTPS 请求处理

    本篇教程我们将介绍 HTTP 服务端技术,包括如何处理 HTTP 请求和 HTTPS 请求。

    学院君
  • 真正“搞”懂http协议01—背景故事

    zaking
  • go http 分析

    handler 参数(w http.ResponseWriter, r *http.Request)

    solate
  • 浅谈SSRF(服务器请求伪造)

    SSRF(Server-Side Request Forgery:服务器端请求伪造) 是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。一般情况下,SSRF...

    字节脉搏实验室
  • 基于select IO复用的HTTP服务器(十一)

    没想到距离上篇文章才过去仅仅半个多月就发生了这么多的事情,其之沉、其之重、其之殇,如氤氲般笼罩环绕在这片古老的大地上。钟南山眼中的泪水让我没有丝毫的心情再在文章...

    老李秀
  • Go语言经典库使用分析(七)| 高性能可扩展 HTTP 路由 httprouter

    Go语言(golang)的一个很大的优势,就是很容易的开发出网络后台服务,而且性能快,效率高。在开发后端HTTP网络应用服务的时候,我们需要处理很多HTTP的请...

    飞雪无情

扫码关注云+社区

领取腾讯云代金券