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的更多相关文章

  1. 同源策略引发对跨域jsonp跨域的理解

    一,同源策略其实网络的安全基石,既:http://www.baidu.com:80协议(http或者HTTPS或者ws或者wss).域名(www.baidu.com).端口(默认80,可以不写 htt ...

  2. jsonp突破同源策略，实现跨域访问请求

    跨域访问问题,相信大家都有遇到过.这是一个很棘手的问题.不过道高一尺,魔高一丈,对于这类问题,总有解决问题的方案.最近我又接触到了这个问题,解决的途径是ajax+jsonp. 说到这个问题,不得不说一 ...

  3. jsonp突破同源策略，实现跨域訪问请求

    版权声明:本文为博主原创文章,未经博主同意不得转载.如需转载请声明:[转自 http://blog.csdn.net/xiaoxian8023 ] https://blog.csdn.net/xiao ...

  4. 学习AJAX必知必会（4）~同源策略、解决跨域问题（JSONP、CORS）

    一.同源策略(Same-Origin Policy),是浏览器的一种安全策略. 1.同源(即url相同):协议.域名.端口号 必须完全相同.(请求是来自同一个服务) 2.跨域:违背了同源策略,即跨域. ...

  5. 什么是同源策略,什么是跨域,如何跨域,Jsonp/CORS跨域

    同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. 可以说Web是构建在同源策略基础之上 ...

  6. 小结ajax中的同源和跨域 jsonp和cors

    网上的同源和跨域一般都比较复杂,最近也稍微总结了一下: 所谓同源,是浏览器的一种安全机制,作用在于保护网页数据的安全,不同源的网页之间不允许cookie dom ajax等行为 同源的条件:1.协议相 ...

  7. 跨域访问 - 跨域请求 同源策略概念对跨域请求的影响 及几种解决跨域请求的方法如 jsonp

    为什么会设置同源策略 > 适用于浏览器的一种资源访问策略 > 同源策略(Same origin policy)是一种约定,它是浏览器最核 心也最 基本的安全功能,如果缺少了同源策略,则浏览 ...

  8. 浏览器同源策略与ajax跨域方法汇总

    原文 什么是同源策略 如果你进行过前端开发,肯定或多或少会听说过.接触过所谓的同源策略.那么什么是同源策略呢? 要了解同源策略,首先得理解“源”.在这个语境下,源(origin)其实就是指的URL.所 ...

  9. 同源策略和Ajax跨域访问

    1. 什么是同源策略 理解跨域首先必须要了解同源策略.同源策略是浏览器上为安全性考虑实施的非常重要的安全策略.    何谓同源:        URL由协议.域名.端口和路径组成,如果两个URL的协议 ...

随机推荐

  1. va注解应用实例 - Annotation, 自定义注解, 注解类规则【转】

    本文介绍了java的自定义注解及注解类编写的规则, 并通过实例来说明下如何使用java的注解. 实例演示了注解在类,构造方法,方法和字段的使用. 可以从这里下载到完成的工程代码: http://dl. ...

  2. 源码来袭：call、apply手写实现与应用

    关于this指向可以了解我的另一篇博客:JavaScript中的this指向规则. 一.call与apply的使用 回顾call与apply的this指向: var value = "win ...

  3. 2018-2019-2 实验一 Java开发环境的熟悉

    实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用IDEA编辑.编译.运行.调试Java程序 实验知识点 1. JVM.JRE.JDK的安装位置与区别: 2. 命令行运行javac:ja ...

  4. freemarker和thymeleaf的使用样例

    最近需要对公司项目首页使用Java模板重做,以提高首屏加载速度和优化SEO. 在选择模板时发现freemarker和thymeleaf最为常用. 两者最大的区别在于语法,对性能方面未作测试,具体性能测 ...

  5. 深入学习css伪类和伪元素及其用法

    前言 CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟. 伪类和伪元素定义 伪类用于在页面中的元素处于某个状态时 ...

  6. [物理学与PDEs]第3章习题7 快、慢及Alfv\'en 特征速度的比较

    证明: 当 $H_1\neq 0$ 及 $H_2^2+H_3^2\neq 0$ 时, 快.慢及 Alfv\'en 特征速度 $C_f$, $C_s$ 及 $C_a$ 满足 $$\bex 0<C_ ...

  7. shell使用lftp连接ftp和sftp,并可以指定私钥

    lftp连接ftp在脚本中可以 lftp -c "open username:password@host:port; ls /Friso/20180822/click/mobile/SUCC ...

  8. DUMP102 企业级电商FE

    101 完成 webpack 配置后,有一套类似 live-reload 自动刷新提供 REPL 环境. [配置 webpack.config.js 别名,方便 js 文件做require 支持路径别 ...

  9. golang slice分割和append copy还是引用

    转载自:http://studygolang.com/articles/724 1. slice1:= slice[0:2] 引用,非复制,所以任何对slice1或slice的修改都会影响对方 dat ...

  10. 个人经验~ 利用5.7的sys库更好的排查问题

    一 简介:今天我们讲讲如何利用5.7的sys新库进行问题的排查二 描述   1 Sys库所有的数据源来自:performance_schema和information_schema.目标是把perfo ...