jd页面与tianmao页面模仿jsonp跨域

最新推荐文章于 2021-09-17 20:41:22 发布

纳米606

最新推荐文章于 2021-09-17 20:41:22 发布

阅读量163

点赞数

分类专栏： node.js JavaScript 文章标签： node.js html css javascript

本文链接：https://blog.csdn.net/qq_38620301/article/details/105568681

版权

JavaScript 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

node.js

3 篇文章 0 订阅

订阅专栏

jd服务器

const express = require('express');
const server = express();
const path = require('path');
// 静态资源访问服务功能
server.use(express.static(path.join(__dirname,'public')))

server.get('/jd',(req,res) => {
    // 取到客户端getInfo请求的参数
    const getInfo = req.query.callback;
    // 向客户端输出: getInfo("我是京东首页")
    res.send(`${getInfo}("我是jd首页")`);
})
server.listen(3000);

tianmao服务器

const express = require('express');
const server = express();
const path = require('path');
// 静态资源访问服务功能
server.use(express.static(path.join(__dirname,'public')))
server.listen(3001);

tianmao请求jd服务器数据

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    tinamao首页页面
    <button>请求jd服务器数据</button>
    <script>
        function getInfo(obj) {
            console.log(obj);
        }
        document.getElementsByTagName('button')[0].onclick = function() {
            // AJAX: 跨域请求数据会被浏览器默认阻止,但是script标签不会
            var script = document.createElement('script');
            script.src = "http://localhost:3000/jd?callback=getInfo";
            // 让这个标签去发送请求,然后挂载到页面
            document.body.appendChild(script);
            // 报错:jd:1 Uncaught ReferenceError: 我是京东首页 is not defined at jd:1
            // 因为我是通过script去发送请求,服务器返回数据,客户端就会以js方式解析代码
            // 解决办法,在客户端定义一个函数,然后传给客户端
        };
    </script>
</body>
</html>