AJAX: 跨域

最新推荐文章于 2022-12-02 20:17:17 发布

Continue丶

最新推荐文章于 2022-12-02 20:17:17 发布

阅读量184

点赞数

分类专栏： Ajax 文章标签： ajax javascript 服务器

本文链接：https://blog.csdn.net/qq_43522998/article/details/115774037

版权

Ajax 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

文章目录

同源策略
如何解决跨域

同源策略

同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。

同源：协议、域名、端口号必须完全相同。
违背同源策略就是跨域。

如何解决跨域

1.JSONP

1) JSONP 是什么
JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求。

2) JSONP 怎么工作的？
在网页有一些标签天生具有跨域能力，比如：img link iframe script。
JSONP 就是利用 script 标签的跨域能力来发送请求的。

3) JSONP 的使用
1.动态的创建一个 script 标签
var script = document.createElement(“script”);

2.设置 script 的 src
script.src = “http://localhost:8000/jsonp-server”;

3.设置回调函数
function handle(data) {
alert(data.name);
};

4.将 script 添加到 body 中
document.body.appendChild(script);

5.服务器中返回函数调用字符串
res.send(‘handle(’+data+’)’);

案例
需求：
离开输入框的焦点，发送请求，从服务器端拿到数据并显示，更改文本框颜色

jsonp.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <span></span>
    <script>
        let input = document.querySelector('input');
        let span = document.querySelector('span');
        //离开焦点触发
        input.onblur = function () {
            //创造script标签
            let script = document.createElement('script');
            //设置标签请求路径
            script.src = 'http://localhost:8000/jsonp-server';
            //添加标签
            document.body.appendChild(script);
        }
        //声明函数
        function handle(data) {
            input.style.border = '1px solid red';
            span.innerHTML = data.msg;
        }
    </script>
</body>
</html>

server.js

// 1.引入express
const express = require('express');

// 2.创建应用对象
const app = express();

// 3.创建路由规则

app.all('/jsonp-server', (request, response) => {
    let data = {
        msg: '用户名已存在！'
    };
    //将数据转为json字符串
    data = JSON.stringify(data);
    //返回函数调用
    response.send(`handle(${data})`);
});

// 4.监听端口启动服务
app.listen(8000, () => {
    console.log('服务已经启动，8000端口监听中...');
})

2.jQuery中的JSONP

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>获取数据</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <input type="text">
    <script>
        let btn = document.querySelector('button');
        btn.onclick = function () {
        //需要传入回调参数callback，固定写法?callback=?
            $.getJSON('http://localhost:8000/jquery-jsonp-server?callback=?', function (response) {
                console.log(response.msg);
                $('input').val(response.msg)
            })

        }
    </script>
</body>
</html>

// 1.引入express
const express = require('express');

// 2.创建应用对象
const app = express();

// 3.创建路由规则

app.all('/jquery-jsonp-server', (request, response) => {
    let data = {
        msg: '我是数据'
    };
    let callback = request.query.callback;
    data = JSON.stringify(data);
    response.send(`${callback} ${data}`);
});

// 4.监听端口启动服务
app.listen(8000, () => {
    console.log('服务已经启动，8000端口监听中...');
})

3 CORS

1.CORS是什么？
CORS（Cross-Origin Resource Sharing），跨域资源共享，是官方的跨域解决方案。

2.特点
不需要在客户端做任何特殊操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

3.CORS如何工作
CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

4.CORS的使用
主要在服务端设置

//通过 res 来设置响应头，来允许跨域请求
response.set("Access-Control-Allow-Origin","http://localhost：8000/cors-server");

Access-Control-Allow-Origin是设置可允许跨域属性
http://localhost：8000/cors-server是设置允许跨域的地址，我们还可以设置为‘*’，这样单表允许说有地址访问

如：

app.all('/jQuery-server', (request, response) => {
    // request 是对请求报文的封装
    // response 是对响应报文的封装
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    let data = { name: 'xy', age: 21 };
    data = JSON.stringify(data);
    response.send(data);
});

想了解更多可设置属性，可访问
网址：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

Continue丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
AJAX: 跨域

同源策略同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。同源：协议、域名、端口号必须完全相同。违背同源策略就是跨域。如何解决跨域JSONP1) JSONP 是什么JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求。2) JSONP 怎么工作的？在网页有一些标签天生具有跨域能力，比如：img link iframe script。JSONP 就是
复制链接

扫一扫

专栏目录