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. idea设置JVM运行参数

    对JVM运行参数进行修改是JVM性能调优的重要手段,下面介绍在应用程序开发过程中JVM参数设置的几种方式. 方式一 java程序运行时指定 -Dproperty=value 该参数通常用于设置系统级全 ...

  2. LeetCode 92. ReverseLinkedII

    #include <iostream> using namespace std; struct ListNode { int val; ListNode *next; ListNode(i ...

  3. JAVA写JSON的三种方法,java对象转json数据

    JAVA写JSON的三种方法,java对象转json数据 转自:http://www.xdx97.com/#/single?bid=5afe2ff9-8cd1-67cf-e7bc-437b74c07a ...

  4. 分布式系列四: HTTP及HTTPS协议

    分布式系列四: HTTP及HTTPS协议 非常全面的一篇HTTP的文章: 关于HTTP协议,一篇就够了 还有一个帮助理解HTTPS的文章: 也许,这样理解HTTPS更容易 本文的一些描述摘自这篇文章 ...

  5. JSR286portlet中使用Ajax的方法

    JSR286portlet支持Ajax 一个平常的portlet先,jsr286类型. /Train01/WebContent/WEB-INF/portlet.xml <?xml version ...

  6. Django-1-URL路由系统

    一.分发地址 在APP中创建urls.py文件,将属于该APP的url地址都写入到这个文件中,当程序收到用户发送的请求时,先在根目录的urls.py文件中查找该地址属于哪个APP,将这个请求分发到该A ...

  7. Django-3-Template模板

    模板是html文档+Django逻辑语句的组合. 一.变量和标签 变量通过{{ }}来表示,两个大括号中间是变量名. 标签通过{% %}来表示,就是Python中的函数和方法. 常用标签: {% fo ...

  8. orm总结

    x先谈谈java方面的. mybatis优点是基本啥都有了,sql统一管理,只需接口就可以了,缺点是对于复杂语句的执行还是麻烦,一般还是在程序里解决,自带的动态sql功能较弱不说,重点是调式时还是麻烦 ...

  9. jsp 安全

    一.  身份验证和授权 认证是检验某人真正是他/她自称的那个人的过 程.在一个Servlet/JSP应用程序中,身份验证一般通过 检查用户名密码是否正确.授权是检查该级别的用户是 否具备访问权限.它适 ...

  10. Ubuntu-linux云服务器下安装开启虚拟环境失败解决办法

    为什么要安装虚拟环境? 1.某些项目需要安装旧的包,开发相应功能 2.项目开发时,安装部分环境不希望影响整机环境 如何安装? 首先安装python 安装pip工具 sudo apt-get insta ...