什么是跨域? 出现原因及解决方法

什么是跨域? 出现原因及解决方法

什么是跨域

  • 跨域：浏览器对于javascript的同源策略的限制 。

  • 同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

  • 设想这样一种情况：A 网站是一家银行，用户登录以后，A 网站在用户的机器上设置了一个 Cookie，包含了一些隐私信息（比如存款总额）。用户离开 A 网站以后，又去访问 B 网站，如果没有同源限制，B 网站可以读取 A 网站的 Cookie，那么隐私信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。

  • 在这里插入图片描述

  • 以下情况都属于跨域：

  • 在这里插入图片描述

  • 在这里插入图片描述

  • 如果域名和端口都相同，但是请求路径不同，不属于跨域，如：
    www.jd.com/item
    www.jd.com/goods
    http和https也属于跨域

为什么有跨域问题？

  • 跨域不一定都会有跨域问题。
  • 因为跨域问题是浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能是与当前页域名相同的路径，这能有效的阻止跨站攻击。
  • 因此：跨域问题 是针对ajax的一种限制。
  • 但是这却给我们的开发带来了不便，而且在实际生产环境中，肯定会有很多台服务器之间交互，地址和端口都可能不同，怎么办？

解决跨域问题的方案

Jsonp

  • Jsonp
  • 最早的解决方案，利用script标签可以跨域的原理实现。
  • https://www.w3cschool.cn/json/json-jsonp.html
  • 限制：
    • 需要服务的支持
    • 只能发起GET请求
  • 原理：
  • Jsonp其实就是一个跨域解决方案。Js跨域请求数据是不可以的，但是js跨域请求js脚本是可以的。可以把数据封装成一个js语句，做一个方法的调用。跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问题。
  • 在这里插入图片描述

nginx

  • nginx反向代理

  • 思路是：利用nginx把跨域反向代理为不跨域，支持各种请求方式

  • 缺点：需要在nginx进行额外配置，语义不清晰

  • 前端server的域名为：fe.server.com
后端服务的域名为：dev.server.com
现在我在fe.server.com对dev.server.com发起请求一定会出现跨域。
现在我们只需要启动一个nginx服务器，将server_name设置为fe.server.com,然后设置相应的location以拦截前端需要跨域的请求，最后将请求代理回dev.server.com。如下面的配置：
server {listen       80;server_name  fe.server.com;location / {proxy_pass dev.server.com;}
}
这样就可以完美绕过浏览器的同源策略了。
fe.server.com访问nginx的fe.server.com属于同源访问，而nginx对服务端转发的请求不会触发浏览器的同源策略。

  • 在这里插入图片描述

CORS

  • CORS
  • 规范化的跨域请求解决方案，安全可靠。
  • 优势：
    • 在服务端进行控制是否允许跨域，可自定义规则
    • 支持各种请求方式
  • 缺点：
    • 会产生额外的请求(预检)
    • 在这里插入图片描述
什么是cors
  • CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
  • 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
    XMLHttpRequest：Ajax的核心对象
    CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
  • 浏览器端：不用考虑
  • 目前，所有浏览器都支持该功能（IE10以下不行）。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。
    服务端：进行相关设置
  • CORS通信与AJAX没有任何差别，因此你不需要改变以前的业务逻辑。只不过，浏览器会在请求中携带一些头信息，我们需要以此判断是否允许其跨域，然后在响应头中加入一些信息即可。这一般通过过滤器完成即可。
原理

  • 预检请求

  • 跨域请求会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

  • 浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

  •     OPTIONS /cors HTTP/1.1Origin: http://localhost:8888Access-Control-Request-Method: GETAccess-Control-Request-Headers: X-Custom-HeaderUser-Agent: Mozilla/5.0...

  • Origin：会指出当前请求属于哪个域（协议+域名+端口）。服务会根据这个值决定是否允许其跨域。

  • Access-Control-Request-Method：接下来会用到的请求方式，比如PUT

  • Access-Control-Request-Headers：会额外用到的头信息
    一个“预检”请求的样板：

  • 预检请求的响应

  • 服务的收到预检请求，如果许可跨域，会发出响应：

  •     HTTP/1.1 200 OKDate: Mon, 01 Dec 2008 01:15:39 GMTServer: Apache/2.0.61 (Unix)Access-Control-Allow-Origin: http://localhost:8888Access-Control-Allow-Credentials: trueAccess-Control-Allow-Methods: GET, POST, PUTAccess-Control-Allow-Headers: X-Custom-HeaderAccess-Control-Max-Age: 1728000Content-Type: text/html; charset=utf-8Content-Encoding: gzipContent-Length: 0Keep-Alive: timeout=2, max=100Connection: Keep-AliveContent-Type: text/plain

  • 如果服务器允许跨域，需要在返回的响应头中携带下面信息：

    • Access-Control-Allow-Origin：可接受的域，是一个具体域名或者*（代表任意域名）
    • Access-Control-Allow-Credentials：是否允许携带cookie，默认情况下，cors不会携带cookie，除非这个值是true
    • Access-Control-Allow-Methods：允许访问的方式
    • Access-Control-Allow-Headers：允许携带的头
    • Access-Control-Max-Age：本次许可的有效时长，单位是秒，过期之前的ajax请求就无需再次进行预检了

  • 有关cookie：

  • 要想操作cookie，需要满足以下条件：

    • 服务的响应头中需要携带Access-Control-Allow-Credentials并且为true。
    • 浏览器发起ajax需要指定withCredentials 为true

  • 在这里插入图片描述

GateWay网关中实现跨域步骤

  • 大概流程建server-gateway模块修改配置pom.xml

  • <?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><parent><artifactId>gmallparent</artifactId><groupId>com.donglin</groupId><version>1.0-SNAPSHOT</version></parent><modelVersion>4.0.0</modelVersion><artifactId>server-gateway</artifactId><properties><maven.compiler.source>8</maven.compiler.source><maven.compiler.target>8</maven.compiler.target></properties><dependencies><dependency><groupId>com.donglin</groupId><artifactId>common-util</artifactId><version>1.0-SNAPSHOT</version></dependency><!-- 服务注册 --><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId></dependency><!-- 服务配置--><!--<dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId></dependency>--><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifactId></dependency></dependencies></project>

  • 在resources下添加配置文件application.yml

  • 80端口要对接前端的端口号(记得检查注册中心有没有api-gateway)

  • server:port: 80
spring:application:name: api-gatewaycloud:nacos:discovery:server-addr: 192.168.121.128:8848gateway:discovery:      #是否与服务发现组件进行结合，通过 serviceId(必须设置成大写) 转发到具体的服务实例。默认为false，设为true便开启通过服务中心的自动根据 serviceId 创建路由的功能。locator:      #路由访问方式：http://Gateway_HOST:Gateway_PORT/大写的serviceId/**，其中微服务应用名默认大写访问。enabled: trueroutes:- id: service-producturi: lb://service-productpredicates:- Path=/*/product/** # 路径匹配

  • 在网关中实现跨域全局配置类实现

  • 包名：com.donglin.gmall.gateway.config

  • CorsConfig类

  • @Configuration
public class CorsConfig {@Beanpublic CorsWebFilter corsWebFilter(){// cors跨域配置对象CorsConfiguration configuration = new CorsConfiguration();configuration.addAllowedOrigin("*"); //设置允许访问的网络configuration.setAllowCredentials(true); // 设置是否从服务器获取cookieconfiguration.addAllowedMethod("*"); // 设置请求方法 * 表示任意configuration.addAllowedHeader("*"); // 所有请求头信息 * 表示任意// 配置源对象UrlBasedCorsConfigurationSource configurationSource = new UrlBasedCorsConfigurationSource();configurationSource.registerCorsConfiguration("/**", configuration);// cors过滤器对象return new CorsWebFilter(configurationSource);}
}

  • 启动类

  • package com.donglin.gmall.gateway;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
public class ServerGatewayApplication {public static void main(String[] args) {SpringApplication.run(ServerGatewayApplication.class,args);}
}

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

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

相关文章

K8S哲学 - statefulSet 灰度发布

K8S哲学 - statefulSet 灰度发布

kubectl get - 获取资源及配置文件 kubectl get resource 【resourceName -oyaml】 kubectl create - 指定镜像创建或者 指定文件创建 kubectl create resource 【resourceName】 --imagemyImage 【-f my.yaml】 kubectl delete kubectl describe resource resourc…
阅读更多...
怎么把试卷答案去掉再打印出来？

怎么把试卷答案去掉再打印出来？

在学习中&#xff0c;试卷无疑是检验学习成果的重要工具。然而&#xff0c;当我们想重新练习这些试卷&#xff0c;加深对知识点的理解和记忆时&#xff0c;答案的存在往往会成为他们复习路上的“绊脚石”。那么&#xff0c;有没有一种方法可以轻松去除试卷上的答案&#xff0c;…
阅读更多...
亚马逊云科技AWS将推出数据工程师全新认证(有资料)

亚马逊云科技AWS将推出数据工程师全新认证(有资料)

AWS认证体系最近更新&#xff0c;在原有12张的基础上&#xff0c;将在2023年11月27日添加第13张&#xff0c;数据工程师助理级认证(Data Engineer Associate)&#xff0c;并且在2024/1/12前半价(省75刀&#xff1d;544人民币。 原有的数据分析专家级认证(Data Analytics Specia…
阅读更多...
qt-C++笔记之滑动条QSlider和QProgressBar进度条

qt-C++笔记之滑动条QSlider和QProgressBar进度条

qt-C笔记之滑动条QSlider和QProgressBar进度条 —— 2024-04-28 杭州 本例来自《Qt6 C开发指南》 文章目录 qt-C笔记之滑动条QSlider和QProgressBar进度条1.运行2.阅读笔记3.文件结构4.samp4_06.pro5.main.cpp6.widget.h7.widget.cpp8.widget.ui 1.运行 2.阅读笔记 3.文件结构…
阅读更多...
RuoYi-Vue-Plus （SPEL 表达式）

RuoYi-Vue-Plus （SPEL 表达式）

RuoYi-Vue-Plus 中SPEL使用 DataScopeType 枚举类中&#xff1a; /*** 部门数据权限*/DEPT("3", " #{#deptName} #{#user.deptId} ", " 1 0 "), PlusDataPermissionHandler 拦截器中定义了解析器&#xff1a; buildDataFilter 方法中根据注解的…
阅读更多...
[LitCTF 2023]Ping、[SWPUCTF 2021 新生赛]error、[NSSCTF 2022 Spring Recruit]babyphp

[LitCTF 2023]Ping、[SWPUCTF 2021 新生赛]error、[NSSCTF 2022 Spring Recruit]babyphp

[LitCTF 2023]Ping 尝试ping一下127.0.0.1成功了&#xff0c;但要查看根目录时提示只能输入IP 查看源代码&#xff0c;这段JavaScript代码定义了一个名为check_ip的函数&#xff0c;用于验证输入是否为有效的IPv4地址。并且使用正则表达式re来匹配IPv4地址的格式。 对于这种写…
阅读更多...
机器学习：基于Sklearn、XGBoost框架，使用逻辑回归、支持向量机和XGBClassifier预测帕金森病

机器学习：基于Sklearn、XGBoost框架，使用逻辑回归、支持向量机和XGBClassifier预测帕金森病

前言 系列专栏&#xff1a;机器学习&#xff1a;高级应用与实践【项目实战100】【2024】✨︎ 在本专栏中不仅包含一些适合初学者的最新机器学习项目&#xff0c;每个项目都处理一组不同的问题&#xff0c;包括监督和无监督学习、分类、回归和聚类&#xff0c;而且涉及创建深度学…
阅读更多...
【已解决】Python Selenium chromedriver Pycharm闪退的问题

【已解决】Python Selenium chromedriver Pycharm闪退的问题

概要 根据不同的业务场景需求&#xff0c;有时我们难免会使用程序来打开浏览器进行访问。本文在pycharm中使用selenium打开chromedriver出现闪退问题&#xff0c;根据不断尝试&#xff0c;最终找到的问题根本是版本问题。 代码如下 # (1) 导入selenium from selenium import …
阅读更多...
科研学习|论文解读——CVPR 2021 人脸造假检测（论文合集）

科研学习|论文解读——CVPR 2021 人脸造假检测（论文合集）

随着图像合成技术的成熟&#xff0c;利用一张人脸照片合成假视频/不良视频现象越来越多&#xff0c;严重侵犯个人隐私、妨碍司法公正&#xff0c;所以人脸造假检测越来越重要&#xff0c;学术界的论文也越来越多。 一、研究1 1.1 论文题目 Multi-attentional Deepfake Detecti…
阅读更多...
自学Python爬虫js逆向（二）chrome浏览器开发者工具的使用

自学Python爬虫js逆向（二）chrome浏览器开发者工具的使用

js逆向中很多工作需要使用浏览器中的开发者工具&#xff0c;所以这里以chrome为例&#xff0c;先把开发者工具的使用总结一下&#xff0c;后面用到的时候可以回来查询。 Google Chrome浏览器的开发者工具是前端开发者的利器&#xff0c;它不仅提供了丰富的功能用于开发、调试和…
阅读更多...
什么是中间件?中间件有哪些?

什么是中间件?中间件有哪些?

什么是中间件&#xff1f; 中间件&#xff08;Middleware&#xff09;是指在客户端和服务器之间的一层软件组件&#xff0c;用于处理请求和响应的过程。 中间件是指介于两个不同系统之间的软件组件&#xff0c;它可以在两个系统之间传递、处理、转换数据&#xff0c;以达到协…
阅读更多...
排序算法（2）快排

排序算法（2）快排

交换排序 思想&#xff1a;所谓交换&#xff0c;就是根据序列中两个记录键值的比较结果来对换这两个记录在序列中的位置&#xff0c;交换排序的特点是&#xff1a;将键值较大的记录向序列的尾部移动&#xff0c;键值较小的记录向序列的前部移动。 一、冒泡排序 public static…
阅读更多...
uniapp：K线图，支持H5，APP

uniapp：K线图，支持H5，APP

使用KLineChart完成K线图制作，完成效果： 1、安装KLineChart npm install klinecharts2、页面中使用 <template><view class="index"><!-- 上方选项卡 --><view class="kline-tabs"><view :style="{color: current==ite…
阅读更多...
stm32单片机开发四、USART

stm32单片机开发四、USART

串口的空闲状态时高电平&#xff0c;起始位是低电平&#xff0c;来打破空闲状态的高电平 必须要有停止位&#xff0c;停止位一般为一位高电平 串口常说的数据为8N1&#xff0c;其实就是8个数据位&#xff08;固定的&#xff09;&#xff0c;N就是none&#xff0c;也就是0个校验…
阅读更多...
【多模态大模型】AI对视频内容解析问答

【多模态大模型】AI对视频内容解析问答

文章目录 1. 项目背景2. 直接对视频进行解析进行AI问答&#xff1a;MiniGPT4-Video2.1 MiniGPT4-Video效果 3. 对视频抽帧为图片再进行AI问答3.1 视频抽帧3.2 图片AI问答3.2.1 阿里通义千问大模型 Qwen-vl-plus3.2.2 Moonshot 1. 项目背景 最近在做一个项目,需要使用AI技术对视…
阅读更多...
618科技嘉年华！五款极致科技产品，开启智能生活新篇章！

618科技嘉年华！五款极致科技产品，开启智能生活新篇章！

准备好迎接一年一度的618了吗&#xff1f;这不仅仅是一场购物的狂欢&#xff0c;更是一次科技的盛宴&#xff0c;一次智能生活的全新启航。今年&#xff0c;我们将带来五款令人瞩目的极致科技产品&#xff0c;它们将彻底颠覆你对智能生活的认知。从娱乐到工作&#xff0c;这些产…
阅读更多...
百度语音识别的springboot应用

百度语音识别的springboot应用

1、pom依赖 <dependency> <groupId>com.baidu.aip</groupId> <artifactId>java-sdk</artifactId> <version>4.16.18</version> </dependency> 2、测试的demo 创建语音识别应用 百度智能云-管理中心 (baidu.com) 代码中要…
阅读更多...
常用图像加密技术-流密码异或加密

常用图像加密技术-流密码异或加密

异或加密是最常用的一种加密方式&#xff0c;广泛的适用于图像处理领域。这种加密方式依据加密密钥生成伪随机序列与图像的像素值进行异或操作&#xff0c;使得原像素值发生变化&#xff0c;进而使得图像内容发生变化&#xff0c;达到保护图像内容的目的。 该加密方法是以图像…
阅读更多...
基于python-flask技术的社区信息交流平台【数据库+15000文档】

基于python-flask技术的社区信息交流平台【数据库+15000文档】

预览 介绍 系统只需使用者通过电脑浏览器即可实现系统的访问和操作的WEB模式的信息化系统。为了保证系统数据的准确性、安全性的数据存储&#xff0c;系统应用MySQL数据库进行系统数据存储服务。根据对社区工作的深入调研和对社区居民的走访调查&#xff0c;详细分析整体系统的…
阅读更多...
短信验证码绕过漏洞（一）

短信验证码绕过漏洞（一）

短信验证码绕过漏洞 0x01原理&#xff1a; 服务器端返回的相关参数作为最终登录凭证&#xff0c;导致可绕过登录限制。 危害&#xff1a;在相关业务中危害也不同&#xff0c;如找回密码&#xff0c;注册&#xff0c;电话换绑等地方即可形成高危漏洞&#xff0c;如果是一些普…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023