跨域问题与解决方法

跨域问题与解决方法

同源策略

浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。
同源策略限制以下几种行为:
Cookie、LocalStorage 和 IndexDB 无法读取
DOM和JS对象无法获得
AJAX 请求不能发送

解决方法

JSONP跨域

jsonp的原理就是利用

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

Vue axios实现,后端node.js

jsonp的缺点:只能发送get一种请求。

跨域资源共享(CORS)

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
  浏览器将CORS跨域请求分为简单请求和非简单请求。
  只要同时满足一下两个条件,就属于简单请求
(1)使用下列方法之一:
head
get
post
(2)请求的Heder是
Accept
Accept-Language
Content-Language
Content-Type: 只限于三个值:application/x-www-form-urlencoded、multipart/form-data、text/plain
不同时满足上面的两个条件,就属于非简单请求。浏览器对这两种的处理,是不一样的。

对于简单请求,浏览器直接发出CORS请求。具体来说,就是在头信息之中,增加一个Origin字段。
CORS请求设置的响应头字段,都以 Access-Control-开头:
1)Access-Control-Allow-Origin:必选
  它的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求。
2)Access-Control-Allow-Credentials:可选
  它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true,如果服务器不要浏览器发送Cookie,删除该字段即可。
3)Access-Control-Expose-Headers:可选
  CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。上面的例子指定,getResponseHeader(‘FooBar’)可以返回FooBar字段的值。

nginx代理跨域

nginx代理跨域,实质和CORS跨域原理一样,通过配置文件设置请求响应头Access-Control-Allow-Origin…等字段。
1)nginx配置解决iconfont跨域
  浏览器跨域访问js、css、img等常规静态资源被同源策略许可,但iconfont字体文件(eot|otf|ttf|woff|svg)例外,此时可在nginx的静态资源服务器中加入以下配置。

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

2)nginx反向代理接口跨域
跨域问题:同源策略仅是针对浏览器的安全策略。服务器端调用HTTP接口只是使用HTTP协议,不需要同源策略,也就不存在跨域问题。
实现思路:通过Nginx配置一个代理服务器域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域访问。
nginx具体配置:

#proxy服务器
server {listen       81;server_name  www.domain1.com;location / {proxy_pass   http://www.domain2.com:8080;  #反向代理proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名index  index.html index.htm;# 当用webpack-dev-server等中间件代理接口访问nignx时,此时无浏览器参与,故没有同源限制,下面的跨域配置可不启用add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时,可为*add_header Access-Control-Allow-Credentials true;}
}

nodejs中间件代理跨域

node中间件实现跨域代理,原理大致与nginx相同,都是通过启一个代理服务器,实现数据的转发,也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名,实现当前域的cookie写入,方便接口登录认证。

转自:
https://juejin.cn/post/6844903882083024910

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言中的分支和循环语句:从入门到精通

分支和循环语句 1. 前言2. 预备知识2.1 getchar函数2.2 putchar函数2.3 计算数组的元素个数2.4 清屏2.5 程序的暂停2.6 字符串的比较 3. 结构化3.1 顺序结构3.2 分支结构3.3 循环结构 4. 真假性5. 分支语句(选择结构)5.1 if语句5.1.1 语法形式5.1.2 else…

Java网络通信UDP

目录 网络通信基础 UDP通信 服务器 1.想要使用UDP通信 要先打开DatagramSocket文件 端口号可以手动指定或系统随机分配 2.阻塞等待接收客户端数据;创建DatagramPacket接收客户端传来的数据 3.处理客户端传来的数据,并进行业务处理(这里…

MySQL 教程 2.4

MySQL UNION 操作符 本教程为大家介绍 MySQL UNION 操作符的语法和实例。 描述 MySQL UNION 操作符用于连接两个以上的 SELECT 语句的结果组合到一个结果集合,并去除重复的行。 UNION 操作符必须由两个或多个 SELECT 语句组成,每个 SELECT 语句的列数…

Python降维数据库之umap使用详解

概要 在数据科学和机器学习领域,数据通常是高维度的,而高维度数据不仅难以可视化,还会增加建模的复杂性。降维是一种处理高维数据的关键技术,而Python UMAP(Uniform Manifold Approximation and Projection)是一种强大的降维工具,它在保留数据结构的同时,将高维数据映…

uni-app引用外部js文件

全局引用 在App.vue文件中添加如下代码 这样在全局所有页面中都可以直接使用该外部js中的函数 onLaunch: function() {var script document.createElement(script);script.src "https://www.test.com/api/testapi.js";document.body.appendChild(script); }, 单…

【IDEA+通义灵码插件】实现属于你的大模型编程助手

目录 1.前言 2.下载安装 3.解释代码 4.生成单元测试 5.生成注释 6.智能补全 1.前言 大模型到底该以一种什么方式落地,从而嵌入我们的工作当中,助力我们工作效率的提升,其实最好的方式也许就是虚拟助手的方式,就像钢铁侠的&…

【OpenCV基础(三)】Ubuntu系统下EasyPR环境配置

环境配置 1、资源下载2、环境配置2.1、1、将EasyPR压缩包拷贝到Ubuntu 三种方法任选一种2.2、解压得到EasyPR文件夹(文件夹一层进入后EasyPR资源内容)2.3、终端命令修改权限**chmod -R 777 ./ EasyPR**2.4、查找EasyPR/include/easypr/config.h,使用gedit方式打开2.…

uni-app app实现web-view H5图片长按下载

问题和使用场景描述: uniapp app web-view中图片无法长按保存,IOS下是正常的,但是Android下长按无反应 解决方案: 下载mui.min.js,放到项目中的static下(下载见最上面的压缩包) 在static目录下新建script.js mui.…

vue2本地开发环境正常,生产环境下this.$router.push({ name: ‘login‘ })不跳转

如果在Vue.js 2中在本地开发环境下正常运行,但在生产环境下使用​​this.$router.push({ name: login })​​不起作用,可能有几个原因需要检查和解决: 路由配置问题: 确保你的路由配置正确,特别是确保在生产环境中,路由的配置和本地开发环境一致。检查是否正确设置了name…

基于springboot+vue的智能学习平台系统

博主主页:猫头鹰源码 博主简介:Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战,欢迎高校老师\讲师\同行交流合作 ​主要内容:毕业设计(Javaweb项目|小程序|Pyt…

SAP PP学习笔记 - 豆知识07 - 如何查看BOM一览

SAP标准提供了CS03,只能查询单个的BOM,如果想查看一览,只能自己写SQVI 查询。 有其他高招的童鞋,请赐教啊。 1,SQVI 工具 SAP MM学习笔记18- SQVI 工具_sap sqvi-CSDN博客 输入查询名,然后点击 登录 2&a…

#QT(DEMO2-登录界面)

1.IDE:QTCreator 2.实验:DEMO登录 3.记录 Line Edit输入不换行 密码框输入如下设置: 运行效果 4.代码

Vue.js+SpringBoot开发在线课程教学系统

目录 一、摘要1.1 系统介绍1.2 项目录屏 二、研究内容2.1 课程类型管理模块2.2 课程管理模块2.3 课时管理模块2.4 课程交互模块2.5 系统基础模块 三、系统设计3.1 用例设计3.2 数据库设计 四、系统展示4.1 管理后台4.2 用户网页 五、样例代码5.1 新增课程类型5.2 网站登录5.3 课…

五、西瓜书——集成学习

1.个体与集成 集成学习通过将多个学习器进行结合,常可获得比单一学习器显著优越的泛化性能,这对“弱学习器”(weak learner)尤为明显因此集成学习的很多理论研究都是针对弱学习器进行的而基学习器有时也被直接称为弱学习器。 要获得好的集成个体学习器应“好而不同”…

武汉灰京文化:多样化推广与创新引领游戏行业

作为专业的游戏推广服务商,武汉灰京文化注重多样化的推广策略,通过与各大媒体、社交平台和游戏社区建立紧密的合作关系,为游戏企业提供全方位的推广服务。他们通过精确的广告投放、内容创作和社交媒体互动等方式,将游戏信息传播给…

【C++】STL学习之旅——初识STL,认识string类

string类 1 STL 简介2 STL怎么学习3 STL缺陷4 string4.1 初识 string4.2 初步使用构造函数成员函数 5 小试牛刀Thanks♪(・ω・)ノ谢谢阅读!!!下一篇文章见!!! 1 STL 简介 …

解读OWASP软件保障成熟度模型SAMM

OWASP软件保证成熟度模型(SAMM)可为所有类型的组织分析和改进其软件安全态势提供有效和可衡量的方法。OWASP SAMM支持完整的软件生命周期,包括开发和获取,并且与技术和过程无关。 1. 简介 OWASP软件保证成熟度模型(SA…

数据结构 第3章 栈、队列和数组(一轮习题总结)

第3章 栈、队列和数组 3.1 栈3.2 队列3.3 栈与队列的应用3.4 数组和特殊矩阵 3.1 栈(1 10 11 20) 3.2 队列(6 12 14 17) 3.3 栈与队列的应用(6 11) 3.4 数组和特殊矩阵 3.1 栈 T1 栈和队列具有相同的逻辑…

Java的基本数据类型和引用数据类型

Java的基本数据类型和引用数据类型 Java中的基本数据类型包括整数类型、浮点类型、字符类型和布尔类型,而引用数据类型主要包括类、接口、数组和枚举。具体介绍如下: 基本数据类型: 整数类型:包括byte、short、int、long&#…

k8s-prometheus监控部署 22

新建项目仓库并上传部署prometheus所需的镜像 开始部署 修改svc访问方式为LoadBalancer 查看用户名和密码 访问grafana监控页面 http://192.168.182.103/​​​​​​ 修改可视化模板 官方监控模板:https://grafana.com/grafana/dashboards 访问prometheus监控页面…