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. ...

随机推荐

出现此错误An association from the table refers to an unmapped class
出现此错误An association from the table refers to an unmapped class,怎么解决: 把Diaocha.hbm.xml文件路径加入到applicat ...
TURN协议初识及turnserver实践
WebRTC协议栈图一 WebRTC stack TURN的全称为Traversal Using Relays around NAT,是STUN/RFC5389的一个拓展,主要添加了Relay功能. ...
分享一下java需要的一些技术
1.前言 you are 大哥,老衲很佩服你们_.还是一样的,有我联系方式的人,哪些半吊子不知道要学习哪些技术,一天让我整知识点,老衲也有事情做的,哪有那么多时间来一直搞知识点啊,我的博客更新很慢的, ...
c++11多线程常用代码总结
关于好记性不如烂笔头理解虽然到位,但是时间长了就容易忘. 本文仅总结自己经常忘记的知识点,非详细解释多线程某些原理.概念. 抱着复习的态度总结此文. 本文参考: cppreference 欢迎指 ...
『与善仁』Appium基础 — 30、操作微信小程序
目录 1.测试微信小程序前提 2.获取微信小程序的进程 3.代码示例 4.补充:(了解) 微信小程序和微信公众号的测试方式基本上是一样的. 微信的小程序越来越多了,随之带来的问题是:小程序如何做自动化 ...
【九度OJ】题目1438：最小公倍数解题报告
[九度OJ]题目1438:最小公倍数解题报告标签(空格分隔): 九度OJ 原题地址:http://ac.jobdu.com/problem.php?pid=1438 题目描述: 给定两个正整数,计 ...
【九度OJ】题目1017：还是畅通工程解题报告
[九度OJ]题目1017:还是畅通工程解题报告标签(空格分隔): 九度OJ 原题地址:http://ac.jobdu.com/problem.php?pid=1017 题目描述: 某省调查乡村交通 ...
【LeetCode】779. K-th Symbol in Grammar 解题报告（Python）
[LeetCode]779. K-th Symbol in Grammar 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingz ...
最大流问题的Ford-Fulkerson模板
详细讲解:http://blog.csdn.net/smartxxyx/article/details/9293665 下面贴上我的第一道最大流的题: hdu3549 1 #include<st ...
第五个知识点复杂性为NP类是什么意思
第五个知识点复杂性为NP类是什么意思原文地址:http://bristolcrypto.blogspot.com/2014/11/52-things-number-5-what-is-meant- ...

Ajax_同源策略以及跨域问题