前端开发中如何解决浏览器跨域问题？

WEB前端开发中浏览器判断是跨域请求会在请求头上添加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，观察浏览器记录，成功解决跨域。

如果你对前端开发感兴趣请点击进入云和数据官网，我们有专业的客服老师为您答疑解惑。

云和数据ICT职业教育发挥公司产业化优势与技术积淀，整合国内外优秀师资，累计自主研发230余项教辅、教材，300余项实践教学案例与实训平台，采用六位一体项目制教学模式，年培养高端ICT技术人才超10000人，累计为企业输送高端泛ICT技术人才超9万人，学员60%来自于口碑推荐。云和数据人才培养技术方向涵盖大数据、JAVA软件工程、UI用户体验设计、前端开发、软件测试、智能制造、虚拟现实、云计算、人工智能九大方向，以九大精品课程为基础，八大就业基地为依托，一次就业率99.02%，61.9%就业薪资超1W，以大数据为首的精品专业平均薪资13.25K。