如何解决浏览器跨域问题?

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

PlaintextGET / HTTP/1.1Origin: http://localhost:8601

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

PlaintextAccess-Control-Allow-Origin:http://localhost:8601

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

PlaintextAccess-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,

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

代码如下:

Javapackage 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,观察浏览器记录,成功解决跨域。

如何解决浏览器跨域问题?

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/277243.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
黑马程序员黑马程序员订阅用户
上一篇 2023年6月17日 07:26
下一篇 2023年6月17日 08:30

相关推荐

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息