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_同源策略以及跨域问题的更多相关文章

JS同源策略和跨域问题
同源策略和跨域问题:http://www.cnblogs.com/chaoyuehedy/p/5556557.html 深入浅出JSONP--解决ajax跨域问题:http://www.cnblogs ...
11. cookie_session_原生ajax_readyState的值_同源策略_跨域_jsonp的使用
1. cookie 浏览器存储技术.(服务器将少量数据交于浏览器存储管理) 作用: 存储数据, 解决 http 协议无状态问题工作流程: 浏览器发送请求给服务器,请求登录服务器返回响应给浏览器,此 ...
第二百七十四节，同源策略和跨域Ajax
同源策略和跨域Ajax 什么是同源策略尽管浏览器的安全措施多种多样,但是要想黑掉一个Web应用,只要在浏览器的多种安全措施中找到某种措施的一个漏洞或者绕过一种安全措施的方法即可.浏览器的各种保安措 ...
JS同源策略和跨域访问
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只 ...
cors跨域和jsonp劫持漏洞和同源策略和跨域请求解决方案
cors跨域和jsonp劫持漏洞: https://www.toutiao.com/a6759064986984645127/ 同源策略和跨域请求解决方案:https://www.jianshu.co ...
ajax请求总是不成功？浏览器的同源策略和跨域问题详解
场景码农小明要做一个展示业务数据的大屏给老板看,里面包含了来自自己网站的数据和来自隔壁老王的数据.那么自己网站的数据提供了 http://xiaoming.com/whoami 这样的数据接口隔壁老 ...
浏览器同源策略，跨域请求jsonp
浏览器的同源策略浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...
django中同源策略和跨域解决方案
一同源策略 1.1何谓同源? 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同 ...
同源、同源策略、跨域问题、django解决方案
什么是同源: URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源. 注意:假如你的网站ip是123.123.123.123,网站的域名是www.abc.com. ...

随机推荐

git 生成ssh
SpringBoot项目使用Nacos作为配置中心
前置条件:jdk.SpringBoot项目.Nacos.Linux服务器(可无) 具体版本:jdk11.SpringBoot 2.3.5.RELEASE.Nacos 2.0.3.Centos 6 目标 ...
【LeetCode】170. Two Sum III - Data structure design 解题报告(C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录题目描述题目大意解题方法数组+字典平衡查找树+双指针日期题目地址:htt ...
【LeetCode】1165. Single-Row Keyboard 解题报告(C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录题目描述题目大意解题方法字典日期题目地址:https://leetcode ...
【LeetCode】4. Median of Two Sorted Arrays 寻找两个正序数组的中位数
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 公众号:负雪明烛本文关键词:数组,中位数,题解,leetcode, 力扣,python ...
【LeetCode】509. Fibonacci Number 解题报告（C++）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录题目描述题目大意解题方法动态规划日期题目地址:https://leetc ...
python语法糖之有参装饰器、无参装饰器
python的装饰器简单来说就是函数的一种形式,是为了扩展原来的函数功能而设计的. 装饰器的特别之处在于它的返回值也是一个函数,可以在不改变原有函数代码的基础上添加新的功能 # 先定义一个函数及引用# ...
第二十七个知识点：什么是对称密码加密的AEAD安全定义？
第二十七个知识点:什么是对称密码加密的AEAD安全定义? AEAD 在之前的博客里,Luke描述了一种被广泛使用的操作模式(ECB,CBC和CTR)对块密码.我们也可能会想我们加密方案的完整性,完整性 ...
Arm64架构下编译便携Python
这段时间,我一直忙于将 Rainbond 源码构建模块移植到 Arm64/aarch64 架构中.对于 Python 项目而言,可以直接通过源代码编译成为可运行在各种容器平台之上的容器镜像.这个过程不 ...
Java程序设计基础笔记 • 【第8章方法】
全部章节 >>>> 本章目录 8.1 方法概述 8.1.1 方法的简介 8.1.2 方法的类 8.1.3 自定义方法简介 8.1.3 自定义方法调用 8.1.4 实践练习 ...

Ajax_同源策略以及跨域问题