Ajax_同源策略

同源策略是浏览器的一种安全策略，

同源指的是：协议、域名、端口、必须完全相同。

违背同源策略就是跨域。

而AJAX是默认遵循同源策略的；

同源说通俗一点呢就是页面跟获取请求的接口是来自同一个服务器，如果不在同一个服务器下就需要设置跨域请求。

下面来给大家演示一个小小的例子

启动服务器 转到该网页，在这个网页里面请求本端口的数据是不需要进行一个跨域操作的 是可以直接请求的

const { request, response } = require('express');
const express = require('express');
​
const app = express();
​
app.get('/home',(request,response) => {
    //响应一个页面
    response.sendFile(__dirname + '/index.html');//新建一个html 
    // response.send("")
​
})
​
app.get("/data",(request,response) =>{
    response.send("用户数据")
})
app.listen(9000,()=>{
    console.log("端口服务启动成功")
});

下面是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>首页</title>
</head>
<body>
    <h1>陈西瓜</h1>
    <button>点击获取用户数据</button>
    <script>
        const btn = document.querySelector("button");
​
        btn.onclick = function(){
            const x = new XMLHttpRequest();
            //因为这里是满足同源策略的，所以url可以简写
            x.open("get","/data")
            //发送请求
            x.send();
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    if(x.status >=200 && x.status < 300){
                        console.log(x.response);
                    }
                }
​
            }
        }
    </script>
</body>
</html>

如何解决跨域

JSONP

JSONP,是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来的，

但是它只支持get请求

JSONP的工作原理

在网页有一些标签天生就具有跨域的能力，比如：img，link，iframe，script

JSONP 就是利用script标签的跨域能力来发送请求的

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>原理演示</title>
    <style>
        #result{
            height: 200px;
            width: 300px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    
    <div id="result">
​
    </div>
    <script>
        function handle(data){
    //获取 result元素
​
    const result = document.getElementById('result');
    result.innerHTML = data.name;
}
    </script>
   // <script src="./app.js"></script>其中一种方法    
     <script src="http://localhost:8000/jsonp-server"></script>
</body>
</html>

server.js代码

//jsonp 规则
app.all('/jsonp-server',(requset,response) =>{
  const data = {
      name:'goubi'
  }
  const str = JSON.stringify(data);
​
  response.end(`handle(${str})`)
})

app.js代码

​
const data = {
    name:'陈西瓜ss'
}
//处理数据
​
​
​
handle(data);
CORS跨域

或者是直接使用cors

就是在服务器的代码里面加入响应头设置

即下方的语法

response.setHeader("")

Access-Contol-Allow-Origin","*"

//Cors
app.all('/cors-server',(request,response)=>{
    //设置了响应头可跨域
    response.setHeader("Access-Contol-Allow-Origin","*");
    response.setHeader('Access-Contol-Allow-Headers','*');
    response.setHeader('Access-Contol-Allow-Method',"*");
    response.send("hello cors");
})

Ajax_同源策略以及跨域问题的更多相关文章

  1. JS同源策略和跨域问题

    同源策略和跨域问题:http://www.cnblogs.com/chaoyuehedy/p/5556557.html 深入浅出JSONP--解决ajax跨域问题:http://www.cnblogs ...

  2. 11. cookie_session_原生ajax_readyState的值_同源策略_跨域_jsonp的使用

    1. cookie 浏览器存储技术.(服务器将少量数据交于浏览器存储管理) 作用: 存储数据, 解决 http 协议无状态问题 工作流程: 浏览器发送请求给服务器,请求登录 服务器返回响应给浏览器,此 ...

  3. 第二百七十四节，同源策略和跨域Ajax

    同源策略和跨域Ajax 什么是同源策略  尽管浏览器的安全措施多种多样,但是要想黑掉一个Web应用,只要在浏览器的多种安全措施中找到某种措施的一个漏洞或者绕过一种安全措施的方法即可.浏览器的各种保安措 ...

  4. JS同源策略和跨域访问

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

  5. cors跨域和jsonp劫持漏洞 和 同源策略和跨域请求解决方案

    cors跨域和jsonp劫持漏洞: https://www.toutiao.com/a6759064986984645127/ 同源策略和跨域请求解决方案:https://www.jianshu.co ...

  6. ajax请求总是不成功？浏览器的同源策略和跨域问题详解

    场景 码农小明要做一个展示业务数据的大屏给老板看,里面包含了来自自己网站的数据和来自隔壁老王的数据.那么自己网站的数据提供了 http://xiaoming.com/whoami 这样的数据接口隔壁老 ...

  7. 浏览器同源策略，跨域请求jsonp

    浏览器的同源策略 浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...

  8. django中同源策略和跨域解决方案

    一  同源策略 1.1何谓同源? 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同 ...

  9. 同源、同源策略、跨域问题、django解决方案

    什么是同源: URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源. 注意:假如你的网站ip是123.123.123.123,网站的域名是www.abc.com. ...

随机推荐

  1. Linux三剑客综合练习

    1.找出/proc/meminfo文件中以s开头的行,至少用三种方式忽略大小写 [root@localhost ~]# grep -E '^[sS]' /proc/meminfo [root@loca ...

  2. vim操作（复制，粘贴）

    整行操作 单行复制 在"命令"模式下,将光标移动到将要复制的行处,按"yy"进行复制 多行复制 在"命令"模式下,将光标移动到将要复制的首行 ...

  3. JAVA实现websocket客户端

    pom依赖 <dependency> <groupId>org.java-websocket</groupId> <artifactId>Java-We ...

  4. mybatis基于注解的sql中空字符串判断

    @Select("<script>" + "select c.id from dwzsk_content c " + "WHERE c.` ...

  5. 【LeetCode】1020. Partition Array Into Three Parts With Equal Sum 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...

  6. 第二十四个知识点：描述一个二进制m组的滑动窗口指数算法

    第二十四个知识点:描述一个二进制m组的滑动窗口指数算法 简单回顾一下我们知道的. 大量的密码学算法的大数是基于指数问题的安全性,例如RSA或者DH算法.因此,现代密码学需要大指数模幂算法的有效实现.我 ...

  7. rabbitmq集群和镜像队列

    Rabbitmq集群和镜像队列 1引言 1.1编写目的 2 原理和使用 2.1镜像队列原理 2.1.1 原理 默认的一个rabbitmq中的queue是在一个node上的,至于在那个node上取决于c ...

  8. Max-Mahalanobis Linear Discriminant Analysis Networks

    目录 概 主要内容 Pang T, Du C, Zhu J, et al. Max-Mahalanobis Linear Discriminant Analysis Networks[C]. inte ...

  9. matplotlib 进阶之origin and extent in imshow

    目录 显示的extent Explicit extent and axes limits matplotlib教程学习笔记 import numpy as np import matplotlib.p ...

  10. Mybatis的联合查询

    数据库表结构 department employee 要求一 现在的要求是输入 id 把 employee 表的对应员工数据查询出来,并且查询出该员工的所处部门信息 JavaBean public c ...