跨域及解决办法

跨域及解决办法

一、什么是跨域

1.跨域:浏览器对于javascript的同源策略的限制 。

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

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

在这里插入图片描述

以下情况都属于跨域:

跨域原因说明示例
域名不同www.jd.com 与 www.taobao.com
域名相同,端口不同www.jd.com:8080 与 www.jd.com:8081
二级域名不同item.jd.com 与 miaosha.jd.com

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

常见问题

在这里插入图片描述

二、为什么出现跨域问题?

1.跨域不一定都会有跨域问题。

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

三、解决跨域问题的方案

1.Jsonp

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

2.nginx

(1)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对服务端转发的请求不会触发浏览器的同源策略。

在这里插入图片描述

3.CORS

(1)CORS:规范化的跨域请求解决方案,安全可靠。
(2)优势:

  • 在服务端进行控制是否允许跨域,可自定义规则
  • 支持各种请求方式

(3)缺点:

  • 会产生额外的请求(预检)

3.1 什么是cors

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。

它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
XMLHttpRequest:Ajax的核心对象
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。

浏览器端:不用考虑
目前,所有浏览器都支持该功能(IE10以下不行)。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。
服务端:进行相关设置
CORS通信与AJAX没有任何差别,因此你不需要改变以前的业务逻辑。只不过,浏览器会在请求中携带一些头信息,我们需要以此判断是否允许其跨域,然后在响应头中加入一些信息即可。这一般通过过滤器完成即可。

3.2 原理

(1)预检请求
跨域请求会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

OPTIONS /cors HTTP/1.1
Origin: http://localhost:8888
Access-Control-Request-Method: GET
Access-Control-Request-Headers: X-Custom-Header
User-Agent: Mozilla/5.0...

Origin:会指出当前请求属于哪个域(协议+域名+端口)。服务会根据这个值决定是否允许其跨域。
Access-Control-Request-Method:接下来会用到的请求方式,比如PUT
Access-Control-Request-Headers:会额外用到的头信息
一个“预检”请求的样板:
预检请求的响应
服务的收到预检请求,如果许可跨域,会发出响应:

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://localhost:8888
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 1728000
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-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网关中实现跨域步骤

1.大概流程

建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/news/779209.shtml

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

相关文章

树结构导入

Testpublic void testExcel1() {// 写法1&#xff1a;JDK8 ,不用额外写一个DemoDataListener// since: 3.0.0-beta1EasyExcelFactory.read(new File("C:\\Users\\Admin\\Desktop\\树导入.xlsx"), null, new ReadListener<Map>() {public static final int BATC…

Vue——案例01(查询用户)

一、案例实现页面 二、案例实现效果 1. 查询效果 2. 年龄升序 3. 年龄降序 4. 原顺序 三、案例实现思路 1. 定义界面所需标签样式 <div id"app"><h2>查询用户:</h2><input type"text" placeholder"请输入名字"/><b…

星闪BLE与蓝牙

蓝牙与低功耗蓝牙 蓝牙工作在2.4GHz的频段&#xff0c;在工作频段2402MHz-2480MHz上分为79个信道&#xff0c;低功耗蓝牙分为40个信道。一组设备通信的时候&#xff0c;短暂占用一个信道发包&#xff0c;由于其跳频技术&#xff0c;每次传输完数据包之后都会切换到另一个信道继…

001-从零学习设计模式-设计原则

写在最前 文档地址&#xff1a;Wiki - Gitee.com 设计模式 推荐浏览&#xff1a;软件设计模式 代表了代码的最佳实践&#xff0c;被有经验的开发人员所使用&#xff1b; 设计模式是很多被反复使用并知晓的&#xff0c;主要是对代码和经验的总结&#xff1b; 使用设计模式是…

Vue 3 安装和引用指南

Vue 3 安装和引用指南 Vue 3 是一个流行的前端JavaScript框架,用于构建用户界面和单页应用程序。本文将指导您如何安装和开始使用 Vue 3。 安装 Vue 3 使用 npm 或 yarn 安装 如果您已经安装了 Node.js,可以通过 npm 或 yarn 来安装 Vue 3。 使用 npm 安装 npm install…

web布局——说清楚fixed布局

极限省流 想要fixed做导航页面&#xff1a;指定清楚top、left、right、bottom&#xff0c;没指定清楚布局位置就会采用默认的方式&#xff1a; 0&#xff09;父元素的padding&#xff1a;fixed元素相对位移 1&#xff09;同级元素是fixed元素&#xff1a;覆盖 2&#xff09…

智能化时代的企业网络,需要“以体验为中心”的建网理念

不久前&#xff0c;著名咨询公司Gartner发布了2024年的《企业有线无线局域网基础设施魔力象限》报告&#xff0c;华为再次入选“领导者”象限。 从2006年开始&#xff0c;Gartner选择以“魔力象限”的形式评估各个市场的技术和服务提供商&#xff0c;通过统一的评估准则&#…

MyLisp项目日志:函数

文章目录 函数函数类型Lambda函数运行环境函数调用可变参数优化函数定义方式柯里化 函数 我们想让用户可以定义自己的函数&#xff0c;而不仅仅是使用我们提供的内建函数 那我们要提供这样的功能就要首先就得提供一个内置函数&#xff0c;可以使用户通过这个函数创建自定义的…

尾矿库在线安全监测:提升矿山安全水平

在矿山安全领域&#xff0c;尾矿库的安全管理尤为关键。尾矿库作为矿山生产链条的重要环节&#xff0c;其稳定性不仅关系到生产活动的持续进行&#xff0c;更直接影响着周边环境和人民群众的生命财产安全。因此&#xff0c;尾矿库的安全监测显得尤为重要。近年来&#xff0c;随…

【Leetcode每日一题】 动态规划 - 不同路径(难度⭐⭐)(46)

1. 题目解析 题目链接&#xff1a;62. 不同路径 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 2.算法原理 想要解决这个问题&#xff0c;我们得像个侦探一样&#xff0c;一步步地追踪路径&#xff0c;找出所有可能的走法。接下…

2024年妈妈杯数学建模思路A题B题C题D题思路分享

文章目录 1 赛题思路2 比赛日期和时间3 组织机构4 建模常见问题类型4.1 分类问题4.2 优化问题4.3 预测问题4.4 评价问题 5 建模资料 1 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 2 比赛日期和时间 报名截止时间&#xff1a;2024…

JavaEE:网络原理——协议(网络层+数据链路层)

网络层&#xff1a;IP协议 IP协议报头 其中取值只有两种&#xff0c;分别是4和6&#xff0c;分别对应IPv4和IPv6 IP报头&#xff0c;单位是4个字节&#xff0c;可变长 type of service&#xff0c;表示当前IP协议所处的工作模式 实际上只有四位是有效的。而且这4为是彼此冲突…

GEE实践应用|热岛效应(一)地表温度计算

目录 1.学习目标 2.理论介绍 3.从MODIS获得地表温度 4.从Landsat卫星获得地表温度 1.学习目标 ①了解如何使用GEE计算地表温度 2.理论介绍 城市化涉及用建筑物、道路和停车场等建筑结构取代自然景观。这种土地覆盖的改变也改变了土地表面的特性。这些变化的范围从表面反射和…

SpringBoot Redis的使用

官方文档&#xff1a; 官方文档&#xff1a;Spring Data Redis :: Spring Data Redis 和jedis一样&#xff0c;SpringBoot Redis 也可以让我在Java代码中使用redis&#xff0c;同样也是通过引入maven依赖的形式。 加速访问github: 使用steam可以免费加速访问github Spring…

汇编实现分页和异常处理

汇编实现分页和异常处理。 .386pStackSeg segment page db 400h dup (0) StackSeg endsStackSeg3 segment page db 400h dup (0) StackSeg3 endsInfoSeg segment page ShowPos dd 0b8000h szEnterProtect db Now Enter Paging Protect Mode …

【微服务】Sentinel(流量控制)

文章目录 1.基本介绍1.Sentinel是什么2.Sentinel主要特性3.Sentinel核心功能1.流量控制2.熔断降级3.消息削峰填谷 4.Sentinel两个组成部分 2.Sentinel控制台显示1.需求分析2.下载3.运行1.进入cmd2.输入java -jar sentinel-dashboard-1.8.0.jar3.查看默认端口8080 4.访问1.账号和…

【八股】泛型

泛型存在的意义&#xff1f; 为了使相同的代码适用于多种数据类型&#xff0c;也就是代码复用。 参数类型上下限限制 <?> 无限制 <? extends E> 声明了类型的上界&#xff0c;表示参数类型可以是他或他的子类。 <? super E> 声明了类型的下界&#xf…

C++多线程:创建多个线程与数据共享安全问题(四)

1、创建多个线程 多线程的调度由操作系统负责&#xff0c;线程执行的先后没有严格的顺序完全看操作系统和CPU的心情。 #include <iostream> #include <vector> #include <thread>void thread_print(int num) {std::cout << "线程编号 " &…

go、rust去掉了继承

为什么go、rust去掉了继承&#xff1f;只要你阅读过很多Java开源系统的源代码就明白。尤其是调试时&#xff0c;一层一层的进入基类&#xff0c;痛苦万分。一个类的功能只看它自己&#xff0c;是不知道有那些功能的&#xff0c;因为它老子、它爷爷的功能都是起作用的。在很多开…