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

作者：码上未来CodingFuture 来源：码上未来CodingFuture 2023年09月04日更新

浏览器判断是跨域请求会在请求头上添加origin，表示这个请求来源哪里。比如： Plaintext GET / HTTP / 1.1 Origin : :// : 8601 服务器收到请求判断这个Origin是否允许跨域，如果允许则在响应头中说明允许该来源的跨域请求，如下： Plaintext Ac...

浏览器判断是跨域请求会在请求头上添加origin，表示这个请求来源哪里。比如： Plaintext GET / HTTP / 1.1 Origin : :// : 8601 服务器收到请求判断这个Origin是否允许跨域，如果允许则在响应头中说明允许该来源的跨域请求，如下： Plaintext Access - - - :// : 8601 如果允许任何域名来源的跨域请求，则响应如下： Plaintext Access - - - * 解决跨域的方法： 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 . . . ; import org . . . . Bean import org . . . . Configuration import org . . . . CorsConfiguration import org . . . . UrlBasedCorsConfigurationSource import org . . . . CorsFilter /** * @description * @author * @date * @version */ @Configuration public class GlobalCorsConfig /** * 允许跨域调用的过滤器 */ @Bean public CorsFilter corsFilter CorsConfiguration = new CorsConfiguration //允许白名单域名进行跨域调用 config. addAllowedOrigin "*" //允许跨越发送cookie config. setAllowCredentials true //放行全部原始头信息 config. addAllowedHeader "*" //允许所有请求方法跨域调用 config. addAllowedMethod "*" UrlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource source. registerCorsConfiguration "/**" return new CorsFilter } } 此配置类实现了跨域过虑器，在响应头添加Access-Control-Allow-Origin。重启系统管理服务，前端工程可以正常进入http://localhost:8601，观察浏览器记录，成功解决跨域。

码上未来沈阳&大连校区介绍码上未来服务于高端IT开发人才的培养，教学大纲紧跟企业实际需求，*课程内容紧随IT互联网发展步伐，课程包含：H5前端开发、Java微服务开发、互联网全栈开发、Python+人工智能、前端与移动开发、C/C++、全链路UI/UE设计、云计算、智能物联网、Unity游戏开发等全栈开发学习内容、旨在通过立体化的人才培养、为企业输送能够创造价值和带来效益的IT职业精英。码上未来始终秉承“立足精英时代，培养时代精英”的使命，以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于引领中国IT人才实践教学模式，努力打造高质量值得信赖的IT人才服务平台。

预约申请免费试学5天互联网全栈开发课程（含H5前端开发、Java微服务开发）！直接拨打即可预约申请免费试学！怕钱不够？可分期付款学费！怕没时间？就业班、业余班两种班型任你选择！怕学不会？教学采用全程面授高品质、高体验培养模式，特别重视学员实践能力的培养，根据个人学习计划提供视频、图文、答疑、一对一作业批改等服务，旨在让零基础学员轻松入门。担心就业？依托众多合作企业资源，提供就业保障和薪资保障服务，让学员毕业就能赢得高薪和名企。码上未来，成就你更好的未来！