jsonp和cors实现跨域

最新推荐文章于 2024-08-13 16:33:17 发布

weixin_34185512

最新推荐文章于 2024-08-13 16:33:17 发布

阅读量88

点赞数

文章标签： json 后端前端 ViewUI

原文链接：https://my.oschina.net/u/3407699/blog/1637825

版权

2019独角兽企业重金招聘Python工程师标准>>>

jsonp实现的原理主要是利用src属性可以去加载跨域的资源，例如script、img。动态的创建script标签，加载跨域资源

下面看一个简单的例子：前端：（本页面的端口号为63342）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script src="http://localhost:8080/js/index.js"></script>//去加载跨域资源
</html>

跨域资源站点后端（我这里使用nodejs写的，很简单的一个server）：

const express=require('express');
const fs=require('fs');
const expressStatic=require('express-static')
var server=express();
server.get('/js/index.js',function (req,res) {
   fs.readFile('./js/index.js',function (err,data) {
       if(err){
           res.send('数据读取失败')
       }else {
           res.send(data);
       }
       res.end();
   })
})
server.listen(8080);

那么我们可以在前端页面看到结果，如图输入图片说明

二、用xhr去请求数据会怎么样呢：前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span>名字:</span><span class="name"></span><br/>
<span>年龄:</span><span clase="age"></span>
</body>
<script >
    function XHR() {
        var xhr;
        try {
            xhr = new XMLHttpRequest();
        }
        catch (e) {
            var IEXHRVers = ["Msxml3.XMLHTTP", "Msxml2.XMLHTTP", "Microsoft.XMLHTTP"];
            for (var i = 0, len = IEXHRVers.length; i < len; i++) {
                try {
                    xhr = new ActiveXObject(IEXHRVers[i]);
                }
                catch (e) {
                    continue;
                }
            }
        }
        return xhr;
    }
    var xhr = XHR();
    xhr.open('GET', 'http://localhost:8080/json/test.json', true);
    xhr.onreadystatechange = function () {
        //xhr.onload=
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                var da = xhr.responseText;
                eval("var json=" + da);
// var json=JSON.parse(da)
               console.log(json);
            } else {
                console.log("数据请求出错");
            }
        }
    }
    // xhr.onerror=function () {
    //     console.log('数据请求出错')
    // }
    xhr.send(null)
</script>
</html>

后端：

const express=require('express');
const fs=require('fs');
// const expressStatic=require('express-static');
var server=express();
server.get('/json/test.json',function (req,res) {
    var obj=req.query;
        fs.readFile('./json/test.json',function (err,data) {
            if(err){
                res.send('数据读取失败')
            }else {
                res.send(data);
            }
            res.end();
        })
})
// server.use(expressStatic('./'))
server.listen(8080);
console.log('启动成功')

结果：跨域了无法请求到数据

输入图片说明

三、相对jsonp只能请求get数据，cors跨域资源共享实现跨域请求资源更好只需要后端实现cors接口就好，改变http响应头。

const express=require('express');
const fs=require('fs');
// const expressStatic=require('express-static');
var server=express();
server.get('/json/test.json',function (req,res) {
    var obj=req.query;
    res.header("Access-Control-Allow-Origin", "*");//所有站点都可以访问该资源
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
        fs.readFile('./json/test.json',function (err,data) {
            if(err){
                res.send('数据读取失败')
            }else {
                res.send(data);
            }
            res.end();
        })
})
// server.use(expressStatic('./'))
server.listen(8080);
console.log('启动成功')

cors的详解可以去看阮一峰老师的博客

转载于:https://my.oschina.net/u/3407699/blog/1637825