Ajax_同源策略以及跨域问题

时间：2022-11-18 07:40:05

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");
})

随机推荐

  1. jsf组件对应表

    组件 标签 说明 UIForm form 表示 HTML表单元素 UIInput InputText 单行文本输入控件   inputTextarea 多行文本输入控件   InputSecret 密 ...

  2. YY前端课程4

    1. CSS和HTML一样,也是标记语言 2. CSS有三种样式:嵌入样式.内部样式(行内样式)和外部样式(外部样式表) 3. CSS的语法:选择器+{一个或多个样式} 4. 选择器是为了找到html ...

  3. 一天一小段js代码（no&period;3）

    //遍历属性,返回名值对 function outputAttributes(element){ var pairs = new Array(), attrName, attrValue, i, le ...

  4. javascript中数组的22种方法

    × 目录 [1]对象继承 [2]数组转换 [3]栈和队列[4]数组排序[5]数组拼接[6]创建数组[7]数组删改[8]数组位置[9]数组归并[10]数组迭代[11]总结 前面的话 数组总共有22种方法 ...

  5. 磁珠&lpar;FB&rpar;的选用

    1. 磁珠(FB)的单位是欧姆,而不是亨特,这一点要特别注意.因为磁珠的单位是按照它在某一频率 产生的阻抗来标称的,阻抗的单位也是欧姆.磁珠的 DATASHEET上一般会提供频率和阻抗的特性曲线图,一 ...

  6. Sybase identity 字段

    1.identity Oracle, DB2, pgSQL中都有sequence的概念,这个概念比Identity先进很多,在Sybase中没有Sequence对象,与之相对应的是Identity 2 ...

  7. OSTC 2015

    上周六去北京参加了OSTC 2015开源技术大会,并分享了<Spark技术内幕>,主要涵盖了Spark Core的核心实现.我主要以WordCount为例,讲解了任务调度的具体实现,资源分 ...

  8. dispatchEvent&lpar;AWTEvent&rpar; 分派事件

    点一个按钮,显示的分派一个指定的事件给系统. 下面是一个例子,当点击close按钮时,分派一个new WindowEvent(this,WindowEvent.WINDOW_CLOSING)事件给系统 ...

  9. GreenDao在列中的单词之间自动加&lowbar;

    1.第一种情况,原字段(属性.列)是 驼峰式命名法 @Entitypublic class Employee { @Id(autoincrement = true) private Long id; ...

  10. mysql 表分区 查看表分区 修改表分区

    原文地址:http://blog.csdn.net/feihong247/article/details/7885199 一.       mysql分区简介 数据库分区 数据库分区是一种物理数据库设 ...

相关文章