练习3-跨域问题（前后台）

最新推荐文章于 2022-11-23 19:24:23 发布

sharryling

最新推荐文章于 2022-11-23 19:24:23 发布

阅读量150

点赞数

分类专栏： js Node.js 每日一练

本文链接：https://blog.csdn.net/qq_22703205/article/details/89403734

版权

js 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

Node.js

9 篇文章 0 订阅

订阅专栏

每日一练

4 篇文章 0 订阅

订阅专栏

跨域问题

在这里插入图片描述

方法一：jsonp

1. jsonp的原理

在这里插入图片描述

代码：
客户端：

<script src="http://localhost:8081/TestJsonp?callback=func"></script>

服务端：

app.get('/TestJsonp',(req,res)=>{
    console.log(req.query.callback);
    fs.readFile(file,(err,data)=>{
        if(err)console.err(err)
        else{
            res.end(`${req.query.callback}(${data.toString()})`)
            //res.end(data.toString())
        }
    })
})

2. jsonp的封装（ajax）

在这里插入图片描述
代码：
客户端：

                    $.ajax({
                        type: "GET",      //data 传送数据类型。post 传递
                        dataType: 'jsonp',  // 返回数据的数据类型json
                        url: "http://localhost:8081/TestJsonp",  // yii 控制器/方法
                        //data: { callback: func },  //传送的数据
                        error: function (err) {
                            console.log(err);
                        }, 
                        success: function (data) {
                                console.log(typeof(data),data);
                        }
                    })

服务端：

app.get('/TestJsonp',(req,res)=>{
    console.log(req.query.callback);
    fs.readFile(file,(err,data)=>{
        if(err)console.err(err)
        else{
            //res.end(`${req.query.callback}(${data.toString()})`)
            res.end(data.toString())
        }
    })
})

方法二：ACAO:’*’

在这里插入图片描述

代码：
客户端：

                    $.ajax({
                        type: "GET",      //data 传送数据类型。post 传递
                        dataType: 'json',  // 返回数据的数据类型json
                        url: "http://localhost:8081/TestJsonp",  // yii 控制器/方法
                        //data: { callback: func },  //传送的数据
                        error: function (err) {
                            console.log(err);
                        }, 
                        success: function (data) {
                                console.log(typeof(data),data);
                            
                        }
                    })

服务端：

app.get('/TestJsonp',(req,res)=>{
    console.log(req.query.callback);
    fs.readFile(file,(err,data)=>{
        if(err)console.err(err)
        else{
            res.set({
                'Content-Type':'application/json',
                'Access-Control-Allow-Origin':'*'
            })
            //res.end(`${req.query.callback}(${data.toString()})`)
            res.end(data.toString())
        }
    })
})