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. react Input 表单

    ​ input react 表单 input 密码框在谷歌浏览器下 会有黄色填充 官网的不太用,这个比较好用 type="password" autoComplete=" ...

  2. Oracle根据约束条件名称查找对应的数据

    select * from dba_constraints where constraint_name = 'SYS_C0082752'

  3. win10 1909+ vs2015up3 使用fmt概述(fmt version 7.0.1)

    !!版权声明:本文为博主原创文章,版权归原文作者和博客园共有,谢绝任何形式的 转载!! 作者:mohist fmt 源码: https://github.com/fmtlib/fmt fmt官方文档: ...

  4. 【LeetCode】198. House Robber 打家劫舍 解题报告（Java & Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 递归 + 记忆化 动态规划 优化动态规划空间 ...

  5. 1114. Boxes

    1114. Boxes Time limit: 0.6 secondMemory limit: 64 MB N boxes are lined up in a sequence (1 ≤ N ≤ 20 ...

  6. 遍历 HashMap 的 5 种最佳方式

    使用 Iterator 遍历 HashMap EntrySet 使用 Iterator 遍历 HashMap KeySet 使用 For-each 循环迭代 HashMap 使用 Lambda 表达式 ...

  7. contrastive CAM

    目录 概 主要内容 一个有趣的应用 > Prabhushankar M., Kwon G., Temel D. and AlRegib G. Contrastive explanation in ...

  8. Spring练习，使用注解的方式，完成模拟用户的正常登录。要求如下： 使用注解方式开发模拟用户的正常登录。

    相关 知识 >>> 相关 练习 >>> 实现要求: 在该实践案例中,使用注解的方式,完成模拟用户的正常登录. 要求如下: 使用注解方式开发模拟用户的正常登录. 实现 ...

  9. Java初学者作业——编写 Java 程序，定义 Employee 类以及 HR 类，实现 HR 为 Employee 加薪的功能。

    返回本章节 返回作业目录 需求说明: 编写 Java 程序,定义 Employee 类以及 HR 类,实现 HR 为 Employee 加薪的功能. 实现思路: 定义 Employee 类,并定义属性 ...

  10. versions-maven-plugin插件批量修改版本号

    1.简介 versions-maven-plugin插件可以管理项目版本, 特别是当Maven工程项目中有大量子模块时, 可以批量修改pom版本号, 插件会把父模块更新到指定版本号, 然后更新子模块版 ...