跨域原理和解决方案

news2024/9/30 13:24:54

前置知识

什么是跨域

主要是由于浏览器的同源策略引起的，同源策略是浏览器的安全机制，当 协议，域名，端口 三者有一个不同，浏览器就禁止访问资源。

比如：http://www.company.com:80

  • http://www.company.com:80/dir/page.html ----成功
  • http://www.child.a.com/test/index.html ----失败，域名不同
  • https://www.a.com/test/index.html ----失败，协议不同
  • http://www.a.com:8080/test/index.html ----失败，端口号不同
同源策略限制以下几种行为：
  • Cookie、LocalStorage 和 IndexDB 无法读取
  • DOM和JS对象无法获得
  • AJAX 请求不能发送
不受同源策略限制的有：
  • 页面上的链接，比如 a 链接。
  • 重定向。
  • 表单提交。
  • 跨域资源的引入，比如：script, img, link, iframe

这里又有一个问题为什么表单提交不受同源策略限制？
所谓的同源策略，是一个域名在没有得到允许，不能够读取其他域名的内容。但浏览器不阻止你像其他域名发出请求。那么form发送请求能够跨域就可以理解，他只是发出请求，并没有得到响应。

首先，表单的提交方式有两种，一种是直接指定表单的action，一种是ajax接手控制请求。
直接使用action的时候，是直接把请求交给了action里面的域，本身页面不会去管他的请求结果，后面的步骤交给了action里面的域。好比：

<from action="baidu.com">
    // you form filed
</from>

上面这个表单提交后，剩余的操作就交给了action里面的域baidu.com，本页面的逻辑和这个表单没啥关系，由于不关系请求的响应，所以浏览器认为是安全的。因为表单提交是一个提交数据的过程，表单提交后就会跳转，表单所在的页面是没办法获取结果的。抽象一点说，form提交和点击a标签跳转差不多，没必要对这个做限制。

而使用ajax来控制form的请求的时候，页面js会需要知道请求的返回值，这个时候，浏览器发出跨域请求，需要获得授权才可以成功请求，否则是会拒绝的。如果Ajax表单跨域提交想得到响应结果，目标服务器应该设置Access-Control-Allow-Origin。

9种跨域解决方法

例子中可运行源码

1，JSONP跨域

jsonp的原理就是利用

jsonp有点： JSONP优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题 。

jsonp缺点： 仅支持get方法具有局限性,不安全可能会遭受XSS攻击。
1）原生JS实现：

<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);

    // 回调执行函数，后端返回的时候会被执行到
    function handleCallback(res) {
        alert(JSON.stringify(res));
    }
 </script>

服务端返回如下（返回时即执行全局函数）：

handleCallback({"success": true, "user": "admin"})

2）jquery Ajax实现：

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",  // 自定义回调函数名
    data: {}
});

3）Vue axios实现：

this.$http = axios;
this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

后端node.js代码：

var querystring = require('querystring');
var http = require('http');
var server = http.createServer();

server.on('request', function(req, res) {
    var params = querystring.parse(req.url.split('?')[1]);
    var fn = params.callback;

    // jsonp返回设置
    res.writeHead(200, { 'Content-Type': 'text/javascript' });
    res.write(fn + '(' + JSON.stringify(params) + ')');

    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

2，nginx代理跨域

通过配置文件设置 请求响应头 Access-Control-Allow-Origin…等字段。

1）nginx配置解决 icon font 跨域
浏览器跨域访问js、css、img等常规静态资源被同源策略许可，但iconfont字体文件(eot|otf|ttf|woff|svg)例外，此时可在nginx的静态资源服务器中加入以下配置。

location / {
  add_header Access-Control-Allow-Origin *;
}

2）nginx反向代理接口跨域（不需要前端做什么）Nginx配置学习

server {    
    listen    8080;    
    server_name localhost;         
    location /default/ {      
      proxy_pass http://localhost;    
    } 
}

以上的配置中,
listen 表示nginx要监听的端口;

server_name 就是访问nginx时在浏览器中输入的域名,可以直接填ip地址,要绑定多个可以用空格隔开;

location 表示nginx监听该端口时要匹配的url,如果访问nginx的url中包含有/default/就执行代理

proxy_pass 表示nginx要把客户端的请求代理到的目标。

比如：www.github.cn -> www.github.com

#proxy服务器
server {
    listen       80;
    server_name  www.github.com;
    location / {
        proxy_pass   www.github.cn; #反向代理
        proxy_cookie_demo www.github.cn www.github.com;
        add_header Access-Control-Allow-Origin www.github.cn;
        add_header Access-Control-Allow-Credentials true;
    }
}

3，WebSocket协议跨域

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。

WebSocket和HTTP都是应用层协议，都基于 TCP 协议。

但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。

同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。

原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

前端处理：

// socket.html
<script>
  let socket = new WebSocket('ws://localhost:3000');
  socket.onopen = function () {
    socket.send('heiheihei');//向服务器发送数据
  }
  socket.onmessage = function (e) {
    console.log(e.data);//接收服务器返回的数据
  }
</script>

服务器端处理：

// server.js
let express = require('express');
let app = express();
let WebSocket = require('ws');//记得安装ws
let wss = new WebSocket.Server({port:3000});
wss.on('connection',function(ws) {
  ws.on('message', function (data) {
    console.log(data);
    ws.send('嘿嘿嘿')
  });
})

4，node中间件代理

实现原理：同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略。 代理服务器，需要做以下几个步骤：

  1. 接受客户端请求 。
  2. 将请求 转发给服务器。
  3. 拿到服务器 响应 数据。
  4. 将 响应 转发给客户端。
    在这里插入图片描述

5，跨域资源共享（CORS）

CORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。浏览器会自动进行 CORS 通信，实现 CORS 通信的关键是后端。只要后端实现了 CORS，就实现了跨域。

服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。
虽然设置 CORS 和前端没什么关系，但是通过这种方式解决跨域问题的话，会在发送请求时出现两种情况，分别为简单请求和复杂请求。

1) 简单请求
只要同时满足以下两大条件，就属于简单请求
条件1：使用下列方法之一：

  • GET
  • HEAD
  • POST

条件2：Content-Type 的值仅限于下列三者之一：

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded

请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器； XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问。

2) 复杂请求
不符合以上条件的请求就肯定是复杂请求了。 复杂请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求,该请求是 option 方法的，通过该请求来知道服务端是否允许跨域请求。

// index.html
let xhr = new XMLHttpRequest()
document.cookie = 'name=xiamen' // cookie不能跨域
xhr.withCredentials = true // 前端设置是否带cookie
xhr.open('PUT', 'http://localhost:4000/getData', true)
xhr.setRequestHeader('name', 'xiamen')
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      console.log(xhr.response)
      //得到响应头，后台需设置Access-Control-Expose-Headers
      console.log(xhr.getResponseHeader('name'))
    }
  }
}
xhr.send()

6，基于post message实现跨域处理

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：

a.） 页面和其打开的新窗口的数据传递
b.） 多窗口之间消息传递
c.） 页面与嵌套的iframe消息传递
d.） 上面三个场景的跨域数据传递

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

7，用 document.domain + iframe实现跨域

只能实现同一个主域，不同子域之间的操作.
v.qq.com和sports.qq.com是在同一个主域。

父页面Ahttp://www.zhufengpeixun.cn/A.html

<iframe src="http://school.zhufengpeixun.cn/B.html"></iframe>
<script>
	document.domain = 'zhufengpeixun.cn';
	var user = 'admin';
</script>

子页面Bhttp://school.zhufengpeixun.cn/B.html

<script>
	document.domain = 'zhufengpeixun.cn';
	alert(window.parent.user);
</script>

8，location.hash + iframe跨域

9，window.name + iframe跨域

参考
参考
参考

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1395777.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

chatgpt的实用技巧四temperature 格式

chatgpt的实用技巧四temperature 格式

四、temperature 格式 GPT3.5 temperature 的范围为&#xff1a;0-0.7&#xff1b; GPT4.0 temperature 的范围为&#xff1a;0-1&#xff1b; 当 temperature 为 0 时候&#xff0c;结果可稳定。 当 temperature 为 0.7/1 时候&#xff0c;结果发散具备创力。 数值越大&a…
阅读更多...
【动态规划】24子数组系列_最长湍流子数组_C++

【动态规划】24子数组系列_最长湍流子数组_C++

题目链接&#xff1a;最长湍流子数组 目录 题目解析&#xff1a; 算法原理 1.状态表示 2.状态转移方程 3.初始化 4.填表顺序 5.返回值 编写代码 题目解析&#xff1a; 题目让我们求返回 arr 的 最大湍流子数组的长度 由题可得&#xff1a; 如果比较符号在子数组中的…
阅读更多...
使用 ClassFinal 对SpringBoot jar加密加固并进行机器绑定

使用 ClassFinal 对SpringBoot jar加密加固并进行机器绑定

写在前面&#xff1a;各位看到此博客的小伙伴&#xff0c;如有不对的地方请及时通过私信我或者评论此博客的方式指出&#xff0c;以免误人子弟。多谢&#xff01;如果我的博客对你有帮助&#xff0c;欢迎进行评论✏️✏️、点赞&#x1f44d;&#x1f44d;、收藏⭐️⭐️&#…
阅读更多...
告别繁琐配置！JVS低代码逻辑引擎让你轻松实现高效数据处理

告别繁琐配置！JVS低代码逻辑引擎让你轻松实现高效数据处理

在当今高度数字化的世界中&#xff0c;逻辑引擎作为数据处理和业务逻辑的核心组件&#xff0c;其重要性不言而喻。它不仅关乎企业数据的准确处理&#xff0c;还影响着业务决策的效率和准确性。为了确保逻辑引擎的正常运行和准确性&#xff0c;配置和测试环节显得尤为重要。 本…
阅读更多...
【技术】MySQL数据读写分离怎么实现

【技术】MySQL数据读写分离怎么实现

、概念&#xff1a; MySQL数据读写分离是存储数据的一种服务架构执行select命令必须连接 slave角色服务器执行insert命令必须连接 maste角色服务器提供数据读写分离功能的中间件软件有&#xff1a; mysql-proxy maxscale mycat拓扑架构只支持一主一从或者一主多从架构 二、实…
阅读更多...
Docker搭建MySQL主从数据库-亲测有效

Docker搭建MySQL主从数据库-亲测有效

1、测试环境概述 1、使用MySQL5.7.35版本 2、使用Centos7操作系统 3、使用Docker20版本 案例中描述了整个测试的详细过程 2、安装Docker 2.1、如果已经安装docker，可以先卸载 yum remove -y docker \ docker-client \ docker-client-latest \ docker-common \ docker-l…
阅读更多...
Spring-BeanPostProcessor PostConstruct init InitializingBean 执行顺序

Spring-BeanPostProcessor PostConstruct init InitializingBean 执行顺序

执行顺序探究 新建一个对象用于测试 Component public class Student implements InitializingBean {private String name;private int age;public String getName() {return name;}public void setName(String name) {this.name name;}public int getAge() {return age;}pu…
阅读更多...
Red Hat Enterprise Linux 7.9 安装图解

Red Hat Enterprise Linux 7.9 安装图解

引导和开始安装 选择倒计时结束前&#xff0c;通过键盘上下键选择下图框选项&#xff0c;启动图形化安装过程。 安装语言选择 这里要区分一下&#xff0c;当前选中的语言作为安装过程中安装器所使用的语言&#xff0c;这里我们选择中文简体。不过细心的同学可能发现&#xff0c…
阅读更多...
Js-WebAPIs-事件流（三）

Js-WebAPIs-事件流（三）

• 事件流与两个阶段说明 事件流指的是事件完整执行过程中的流动路径 说明&#xff1a;假设页面里有个div&#xff0c;当触发事件时&#xff0c;会经历两个阶段&#xff0c;分别是捕获阶段、冒泡阶段 简单来说&#xff1a;捕获阶段是 从父到子 冒泡阶段是从子到父 实际工作都是…
阅读更多...
Debian系统写Mysql时中文出现乱码无法定入的问题解决方案

Debian系统写Mysql时中文出现乱码无法定入的问题解决方案

原因是操作系统可能精简安装&#xff0c;没有GBK字符集&#xff0c;只有UTF8在转换或使用的时候有问题。 使用locale -a查看系统支持的字符集。正常的比较全的字符集的操作系统如下&#xff1a; 有问题的操作系统字符集如下&#xff1a; 解决方案&#xff1a; 步骤1&#…
阅读更多...
LiveNVR监控流媒体Onvif/RTSP功能-服务接收RTSP推流RTSPServer可以拉转配置到通道中视频直播

LiveNVR监控流媒体Onvif/RTSP功能-服务接收RTSP推流RTSPServer可以拉转配置到通道中视频直播

LiveNVR服务接收RTSP推流RTSPServer可以拉转配置到通道中视频直播 1、需求背景2、开启RTSP2.1、基础配置配置RTSP端口 3、获取RTSP推流地址3.1、RTSP推流地址格式3.3、RTSP推流地址示例 4、配置设备推流5、配置拉转RTSP5.1、直播流地址格式5.2、直播流地地址示例5.3、通道配置直…
阅读更多...
滑雪挑战H5小游戏

滑雪挑战H5小游戏

欢迎来到程序小院 滑雪挑战 玩法&#xff1a;点击鼠标左键控制人物滑雪的方向&#xff0c;注意不同的弯道&#xff0c;滑雪过程中会有⭐️&#xff0c;看你会获得⭐️&#xff0c;快去滑雪吧^^。开始游戏https://www.ormcc.com/play/gameStart/254 html <canvas id"c…
阅读更多...
文件系统和IO流

文件系统和IO流

目录 ​文件系统和IO流 一:文件的认知 认识文件 树型结构组织和⽬录: 文件路径&#xff08;Path): 文件形式: 二:File的方法 File的概述: File的属性 File的构造方法 File常用的get系列方法 ⽰例一:观察get系列的特点和差异 File常用的增,删方法 示例二:普通文件…
阅读更多...
基于振弦采集仪的地下工程振动监测技术研究

基于振弦采集仪的地下工程振动监测技术研究

基于振弦采集仪的地下工程振动监测技术研究 地下工程振动监测技术是为了监测地下工程施工过程中产生的振动而进行的研究。振弦采集仪是一种常用的地下工程振动监测设备&#xff0c;它通过固定在地下工程附近的振弦仪来实时采集工程施工过程中产生的振动信号。 基于振弦采集仪的…
阅读更多...
5.文本文件编辑命令

5.文本文件编辑命令

1.cat 用于查看纯文本文件&#xff08;内容较少的&#xff09; 加上-n参数&#xff0c;显示内容加行号 [rootlocalhost ~]# cat -n /etc/sysconfig/network-scripts/ifcfg-ens160 2.more 用于查看纯文本文件&#xff08;内容较多的&#xff09; 还可以使用空格键或回车 键…
阅读更多...
Qt/C++中英输入法/嵌入式输入法/小数字面板/简繁切换/特殊字符/支持Qt456

Qt/C++中英输入法/嵌入式输入法/小数字面板/简繁切换/特殊字符/支持Qt456

一、前言 在嵌入式板子上由于没有系统层面的输入法支持&#xff0c;所以都绕不开一个问题&#xff0c;那就是在需要输入的UI软件中&#xff0c;必须提供一个输入法来进行输入&#xff0c;大概从Qt5.7开始官方提供了输入法的源码&#xff0c;作为插件的形式加入到Qt中&#xff…
阅读更多...
Spring Boot整合Druid(druid 和 druid-spring-boot-starter)

Spring Boot整合Druid(druid 和 druid-spring-boot-starter)

引言 在现代的Web应用开发中&#xff0c;高性能的数据库连接池是确保应用稳定性和响应性的关键因素之一。Druid是一个开源的高性能数据库连接池&#xff0c;具有强大的监控和统计功能&#xff0c;能够在Spring Boot应用中提供出色的数据库连接管理。本文将研究在Spring Boot中…
阅读更多...
L1-048 矩阵A乘以B(Java)

L1-048 矩阵A乘以B(Java)

给定两个矩阵A和B&#xff0c;要求你计算它们的乘积矩阵AB。需要注意的是&#xff0c;只有规模匹配的矩阵才可以相乘。即若A有Ra行、Ca列&#xff0c;B有Rb行、Cb列&#xff0c;则只有Ca与Rb相等时&#xff0c;两个矩阵才能相乘。 输入格式&#xff1a; 输入先后给出两个矩阵…
阅读更多...
Redis--Geo指令的语法和使用场景举例（附近的人功能）

Redis--Geo指令的语法和使用场景举例（附近的人功能）

文章目录 前言Geo介绍Geo指令使用使用场景&#xff1a;附近的人参考文献 前言 Redis除了常见的五种数据类型之外&#xff0c;其实还有一些少见的数据结构&#xff0c;如Geo&#xff0c;HyperLogLog等。虽然它们少见&#xff0c;但是作用却不容小觑。本文将介绍Geo指令的语法和…
阅读更多...
jrebel IDEA 热部署

jrebel IDEA 热部署

1 下载 2022.4.1 JRebel and XRebel - IntelliJ IDEs Plugin | Marketplace 2 选择下载好的zip 离线安装IDEA 插件 重启IDEA 3 打开 [Preference -> JRebel & XRebel] 菜单&#xff0c;输入 GUID address 为 https://jrebel.qekang.com/1e67ec1b-122f-4708-87d…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023