当前位置:首页 > 技术分析 > 正文内容

浏览器的跨域问题该怎么解决?

ruisui884个月前 (03-07)技术分析15

浏览器判断是跨域请求会在请求头上添加origin,表示这个请求来源哪里。比如:

Plaintext
GET / HTTP/1.1
Origin: http://localhost:8601

服务器收到请求判断这个Origin是否允许跨域,如果允许则在响应头中说明允许该来源的跨域请求,如下:

Plaintext
Access-Control-Allow-Origin:http://localhost:8601

如果允许任何域名来源的跨域请求,则响应如下:

Plaintext
Access-Control-Allow-Origin:*

解决跨域的方法:

1、JSONP

通过script标签的src属性进行跨域请求,如果服务端要响应内容则首先读取请求参数callback的值,callback是一个回调函数的名称,服务端读取callback的值后将响应内容通过调用callback函数的方式告诉请求方。如下图:

2、添加响应头

服务端在响应头添加
Access-Control-Allow-Origin:

3、通过nginx代理跨域

由于服务端之间没有跨域,浏览器通过nginx去访问跨域地址。

1)浏览器先访问
http://192.168.101.10:8601 nginx提供的地址,进入页面

2)此页面要跨域访问
http://192.168.101.11:8601 ,不能直接跨域访问http://www.baidu.com:8601 ,而是访问nginx的一个同源地址,比如:
http://192.168.101.11:8601/api ,通过
http://192.168.101.11:8601/api 的代理去访问http://www.baidu.com:8601。

这样就实现了跨域访问。

浏览器到
http://192.168.101.11:8601/api 没有跨域

nginx到http://www.baidu.com:8601通过服务端通信,没有跨域。

我们准备使用方案2解决跨域问题。在内容管理的api工程config包下编写GlobalCorsConfig.java,

或直接从课程资料/项目工程下拷贝,

代码如下:

Java
package com.xuecheng.system.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * @description 跨域过虑器
 * @author Mr.M
 * @date 2022/9/7 11:04
 * @version 1.0
 */
 @Configuration
 public class GlobalCorsConfig {

  /**
   * 允许跨域调用的过滤器
   */
  @Bean
  public CorsFilter corsFilter() {
   CorsConfiguration config = new CorsConfiguration();
   //允许白名单域名进行跨域调用
   config.addAllowedOrigin("*");
   //允许跨越发送cookie
   config.setAllowCredentials(true);
   //放行全部原始头信息
   config.addAllowedHeader("*");
   //允许所有请求方法跨域调用
   config.addAllowedMethod("*");
   UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
   source.registerCorsConfiguration("/**", config);
   return new CorsFilter(source);
  }
 }

此配置类实现了跨域过虑器,在响应头添加
Access-Control-Allow-Origin。

重启系统管理服务,前端工程可以正常进入http://localhost:8601,观察浏览器记录,成功解决跨域。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2557.html

分享给朋友:

“浏览器的跨域问题该怎么解决?” 的相关文章

vue组件间的九种通信方式

前言Vue组件实例间的作用域是相互独立的,而通常一个页面是由很多个组件构成,这些组件可能又嵌套了组件,形成了一个关系网图,它们的关系可能是像下图中一样,大致分为两种使用场景,父子组件间通信和非父子组件间通信,父子组件间通信又分为直接父子关系和间接父子关系。vue提供了多种通信方法,针对不同的通信需求...

虚幻引擎5.5现已发布 手游开发、动画制作重大改进

Epic在今天发布了虚幻引擎5.5,现可通过Epic Launcher下载。此版本在动画创作、渲染、虚拟制片、移动端游戏开发和开发人员迭代工具集等方面做出了重大改进。 官方博客:虚幻引擎5.5现已发布,在动画创作、虚拟制作和移动游戏开发方面取得了显著进步,渲染、摄像机内视觉特效和开发人员迭代等领域的...

JavaScript数组操作:掌握常用方法,提升开发效率

JavaScript数组操作:从增删改查到高级应用本文深入解析JavaScript中常用的数组方法,包括push、unshift、pop、shift、map、filter、reverse、at 和 slice。通过详细的例子和应用场景,帮助开发者快速掌握这些方法,提升代码效率和可读性。开篇点题作为J...

微信企业号首款永久免费应用问世

7月14日,微信企业号移动办公应用领跑者——办公逸宣布:其所研发的微信办公应用将永久免费,企事业单位只要拥有微信企业号都可以免费安装办公逸各项应用,此举标志着微信办公免费时代现已到来!据悉,办公逸(www.bangongyi.com)现已推出四大微信办公套件,分别为:移动办公管理套件、客户关系管理套...

Linux TCP RST情况

导致“Connection reset”的原因是服务器端因为某种原因关闭了Connection,而客户端依然在读写数据,此时服务器会返回复位标志“RST”,然后此时客户端就会提示“java.net.SocketException: Connection reset”。可能有同学对复位标志“RST”还...

如何解决iframe跨域问题?这些解决方案可以有效满足你的业务场景

今天我们聊一下前端中非常基础的一个知识点——iframe跨域。作为一名前端,在业务中你可能会遇到这样一个场景:自己开发的页面中需要通过iframe嵌入别人的页面,比如passport页面(登录),但是常常因为跨域问题,导致父子页面无法通信,这时我们就要想办法如何在跨域的情况下解决这个问题。什么是跨域...