ajax同源政策和解决同源政策的方法和模拟封装jsonp函数和CORS跨域共享和服务端代理

最新推荐文章于 2023-01-13 14:22:57 发布

沐浴前端

最新推荐文章于 2023-01-13 14:22:57 发布

阅读量264

点赞数 1

分类专栏： ajax 文章标签： ajax请求限制使用jsonp解决跨域封装jsonp函数 CORS跨域共享服务端代理解决非同源限制

本文链接：https://blog.csdn.net/weixin_44976833/article/details/102752013

版权

ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

同源政策

1.ajax请求限制

ajax只能向自己的服务器发送请求;

比如现在有一个A网站、有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求，但是 A 网站是不能向 B 网站发送 Ajax请求的，同理，B 网站也不能向 A 网站发送 Ajax请求。

2.什么是同源

如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。

3.同源政策的目的

同源政策是为了保证用户信息安全,防止恶意的网站窃取数据,。最初的同源政策是指
A 网站在客户端设置的 Cookie，B网站是不能访问的。

随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax 请求，如果请求，浏览器就会报错。

4.使用jsonp解决同源限制(跨域)

它不属于 Ajax 请求，但它可以模拟 Ajax 请求。

1.将不同源的服务器请求地址写在script标签的src属性中;

<script src="www.example.com"></script>

2.服务器端响应数据必须是一个函数的调用,真正要发送给客户端的数据需要作为函数调用的参数;

 const data = 'fn({name: "张三", age: "20"})';
 res.send(data);

3.在客户端全局作用域下定义fn

function fn(data){ }

4.在fn函数内部对服务器端返回的数据进行处理;

function fn(data){console.log(data)}

5.封装jsonp函数

方便请求发送

function jsonp(options){
    //动态创建script标签
    var script = document.createElement('script');
    // 拼接字符串变量
    var params = '';
    for(var attr in options.data){
        params += "&" +attr +"="+options.data[attr];
    }
    // 随机一个函数名
    var fnName = 'myJsonp'+Math.random().toString().replace('.','');
    // 把那个函数变成全局的函数
    window[fnName] = options.success;
    //为script标签添加src属性
    script.src = options.url+'?callback=' + fnName+params;
    //将script标签追加到页面中
    document.body.appendChild(script);
    // 为script添加onload事件
    script.onload = function(){
        document.body.removeChild(script);

    }
}

案例获取腾讯网天气信息

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用jsonp获取腾讯天气信息</title>
    <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
    <style>
        .container {
            padding-top: 60px;
        }
    </style>
</head>

<body>
    <div class="container">
        <table class="table table-striped table-hover" align="center" id="box"> </table>

    </div>
    <script src="/js/jsonp.js"></script>
    <script src="./js/template-web.js"></script>
    <script type="text/html" id="tpl">
        <tr>
            <th>时间</th>
            <th>温度</th>
            <th>天气</th>
            <th>风向</th>
            <th>风力</th>
        </tr>
        {{each info}}
        <tr>
            <td>{{dateFormat($value.update_time)}}</td>
            <td>{{$value.degree}}</td>
            <td>{{$value.weather}}</td>
            <td>{{$value.wind_direction}}</td>
            <td>{{$value.wind_power}}</td>
        </tr>
        {{/each}}
    
    </script>
    <script>
        //获取table标签
        var box = document.getElementById('box');
		//封装函数,把变量开放到模板中,设置时间格式
        function dateFormat(date){
            var year = date.substr(0, 4);
			var month = date.substr(4, 2);
			var day = date.substr(6, 2);
			var hour = date.substr(8, 2);
			var minute = date.substr(10, 2);
            var seconds = date.substr(12, 2);
            return year+'年'+month+'月'+ day + '日' + hour + '时' + minute + '分' + seconds + '秒';
        }
        // 想模板中开放外部变量
        template.defaults.imports.dateFormat = dateFormat;

        //向服务端获取天气信息
        jsonp({
            url:'http://wis.qq.com/weather/common',
            data:{
                source:'pc',
                // weather_type:'forecast_1h|forecast_24h',
                //一天24小时天气
                weather_type:'forecast_1h',
                province:'河南省',
                city:'郑州市'
            },
            success:function(data){
                //返回结果,拼接在模板中
               var html =  template('tpl',{info:data.data.forecast_1h})
               //渲染在页面中
                box.innerHTML = html;
            }
        })
    </script>
</body>

</html>

6.CORS跨域共享

CORS：全称为 Cross-originresource sharing，即跨域资源共享，它允许浏览器向跨域服务器发送 Ajax 请求，克服了 Ajax 只能同源使用的限制。

跨域资源共享需要在另一个服务器设置一下配置

app.use((req, res, next) => {
	// 1.允许哪些客户端访问我
	// * 代表允许所有的客户端访问我
	// 注意：如果跨域请求中涉及到cookie信息传递，值不可以为*号 比如是具体的域名信息
	res.header('Access-Control-Allow-Origin', 'http://localhost:3000')
	// 2.允许客户端使用哪些请求方法访问我
	res.header('Access-Control-Allow-Methods', 'get,post')
	// 允许客户端发送跨域请求时携带cookie信息
	res.header('Access-Control-Allow-Credentials', true);
	next();
});

7.服务端代理解决非同源限制

//客户端设置
<button id="btn">发送请求</button>
    <script src="/js/ajax.js"></script>
    <script>
        //获取按钮
        var btn = document.getElementById('btn');
        //为按钮添加点击事件
        btn.onclick = function(){
            ajax({
                type:'get',
                url:'http://localhost:3000/server',
                success:function(data){
                    console.log(data);                }
            })
        }
//使用端口为3000的服务器代理访问端口为3001的本地域名
//端口为3000的服务器配置

//导入request向其他服务器端请求数据的模块,返回一个方法  ,调用这个方法就可以想起他服务器端发送请求
//服务器端没有同源政策影响的,可以随意发送
const request = require('request');
app.get('/server', (req, res) => {
    request('http://localhost:3001/cross', (err, response, body) => {
     
        res.send(body);
    })
});