AJAX_违反了同源策略_就是"跨域"—

https 协议默认端口号 443

http 协议默认端口号 80

同源策略

由网景公司提出的——浏览器的

为了浏览器安全而生

同源策略：协议、域名、端口号必须完全一致

违背同源策略，就是跨域

跨域问题只存在于 AJAX 中____浏览器的 AJAX 引擎检测出来的问题____绕开这个引擎

由于跨域，直接导致无法获取响应数据

1. jsonp 的跨域请求解决方案

由于普通标签没有跨域问题，所以利用 <script > 标签来发送跨域请求

利用 <script> 标签能够跨域，且请求到资源后直接执行

优势：

只能发 get 请求

兼容性很好

1. 创建 script 标签

let script = document.createELement("script");

2. 设置响应成功的全局回调函数

window.getData = function(server_info){

console.log(server_info); // 直接打印接收到的响应数据

};

3. 设置 script 的 src 属性

script.src = 'http://localhost:3000/jsonp?callback=getData';

4. 将 script 添加到页面中生效

document.body.appendChild(script);

5. 服务器端 ajax.js

app.get('', ()=>{

const data = {name: 'postResponse', age: 18}; // 要响应给浏览器的数据

response.send(`${callback}(${JSON.stringify(data)})`);

// getData(name: 'postResponse', age: 18) // 被浏览器请求过去，然后执行了。简介获取了响应数据

// 必须要将对象转化为 JSON 数据，然后被浏览器解析成字符串。否则报错

});

实例源代码

node 服务器 index.js

const express = require('express');

const app = express();

app.use(express.static('public'));

app.use(express.urlencoded({extended: true}));

// 原生 ajax 的 get 路由

app.get("/jsonp", (request, response)=>{

    //获取请求参数

    const {callback} = request.query;

    const data = {name: 'postResponse', age: 18};    // 要响应给浏览器的数据

    response.send(`${callback}(${JSON.stringify(data)})`);

    // getData(name: 'postResponse', age: 18)

    // 被 浏览器 请求过去，然后执行了。间接获取了响应数据

    // 必须要 将 对象转化为 JSON 字符串数据，然后被浏览器 解析成 JSON 对象。否则报错

});

/**************** 端口号 3000, 启动服务器 ***************/

app.listen(3000, err=>console.log(err?err:'\n\n服务器已启动: http://localhost:3000/jsonp.html\n\t\tHunting Happy!'));

浏览器前端

public/index.html

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

    </head>

    <body>

        <button id="btn">点击发送jsonp的跨域请求</button>

        <script type="text/javascript">

            document.getElementById('btn').onclick = function () {

                /*

                  jsonp：

                    工作原理:

                      利用script标签能够跨域的特性解决跨域的

                    特点：

                      1. 只能发送get请求

                      2. 兼容性好

                 */

                // 1. 创建script标签

                let script = document.createElement('script');

                // 2. 设置响应成功的全局回调函数

                window.getData = function (data) {

                    console.log(data);

                };

                // 3. 设置script的src属性

                script.src = 'http://localhost:3000/jsonp?callback=getData';

                // 4. 将script添加到页面中生效

                document.body.appendChild(script);

            }

        </script>

    </body>

</html>

2. cors 官方解决方案

官方提供的跨域问题解决方案

前端不必做任何事，在服务器端设置一个响应头即可

注意：

支持所有请求方式

兼容性差，

access-control-allow-origin

app.get('/cors', (request, response)=>{

response.set('access-control-allow-origin', '*'); // 允许所有请求地址跨域

response.send({"name":'corsResponse', age: 22});

});

实例源代码

node 服务器 index.js

const express = require('express');

const app = express();

app.use(express.static('public'));

app.use(express.urlencoded({extended: true}));

// 原生 ajax 的 get 路由

app.get('/cors', (req, res) => {

    /*

      cors 是官方提供的解决跨域问题的一种方案

      特点：

        1. 所有请求方式都支持

        2. 兼容性较差

      使用：

        设置一个响应头  access-control-allow-origin

     */

    // res.set('access-control-allow-origin', '*');  //允许所有请求地址跨域

    res.set('access-control-allow-origin', 'http://localhost:3000/cors');  //允许当前请求地址跨域

    res.send({name: 'jack', age: 18});

})；

/**************** 端口号 3000, 启动服务器 ***************/

app.listen(3000, err=>console.log(err?err:'\n\n服务器已启动: http://localhost:3000/cors.html\n\t\tHunting Happy!'));

浏览器前端代码 index.html

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>官方 cors 解决跨域问题</title>

    </head>

    <body>

        <button id="btn">点击按钮发送ajax请求</button>

        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

        <script type="text/javascript">

            $('#btn').click(function () {

                $.get('http://localhost:3000/cors', function(server_info){//成功的回调函数

                    console.log(server_info);

                })

            })

        </script>

    </body>

</html>

巴特西

AJAX_违反了同源策略_就是"跨域"——jsonp 和 cors

最新文章

热门文章