nodejs和jsonp跨域问题

最新推荐文章于 2023-10-12 01:16:16 发布

原创最新推荐文章于 2023-10-12 01:16:16 发布 · 280 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jsonp

nodejs 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了JSONP跨域请求的原理及实现方法，包括利用script标签src属性进行跨域请求的具体步骤，以及使用$.ajax方法实现JSONP请求的细节。通过前后端配合，演示了如何成功获取跨域数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jsonp跨域问题

核心思想:

浏览器虽然有同源策略，但是 src 和 href 两个属性却可以跨域访问。可以利用这一“漏洞”来请求另一个网站的页面。

$.post、 $.get 、$.ajax都能发送跨域请求，但是，$.post和$.get是要依靠cors方式的，只有$.ajax能使用jsonp方式。

$ajax凡是发送跨域请求，核心有一下3点：

1.请求类型必须设置为：‘get’；
2.后端返回的数据类型dataType必须是：‘jsonp’；
3.必须额外设置一个jsonp参数，该参数可以是任意的英文字符串，常用callback。（该参数产生一个随机字符串，前端使用该字符串创建一个函数，后端接收该字符串作为返回函数的名称）

方式一：利用script标签的src属性

案例: 在 http://127.0.0.1:3000/index ===> 显示 index.html 页面，在 index.html页面中使用 script标签的src属性请求另一个服务器 http://127.0.0.1:8888/jsonp；在 http://127.0.0.1:8888/jsonp 返回一个函数调用的字符串

前端：

<script>
    // 函数声明，函数的形参就能获得后端返回的数据
    function aaa (data){
        console.log(data);
    }
</script>

<!--前端使用src请求得到的就是一个函数调用，要在之前有对应的函数声明-->
<script src="http://127.0.0.1:8888/jsonp"></script>

后端：

const express = require('express');
const app = express();
app.listen(8888, () => {
    console.log('app_server is running...');
});
app.get('/jsonp',(ewq,res) => {
    // res.send('aaa(123)');
    res.send('aaa({code:200,message:"请求成功"})');
});

结果：

方式二：$ajax方法（ jsonp实际上是不属于Ajax请求的，因为没有用到 xhr 对象）

前端：

<script>
    $.ajax({
        url : 'http://127.0.0.1:8888/getData',
        type : 'get',
        dataType : 'jsonp',
        jsonp : 'callback',
        // jsonpCallback : 'fun',
        success : function (msg){
            console.log(msg);
        }
    })
</script>

后端：

const express = require('express');
const app = express();
app.listen(8888,()=> {
    console.log('server is running');
});

app.get('/getData',(req,res) => {
    console.log(req.query.callback);
    const fun = req.query.callback;
   res.send(fun+'("www")');
});

浏览器结果