如何解決瀏覽器跨域問(wèn)題？

瀏覽器判斷是跨域請(qǐng)求會(huì)在請(qǐng)求頭上添加origin，表示這個(gè)請(qǐng)求來(lái)源哪里。比如：

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

服務(wù)器收到請(qǐng)求判斷這個(gè)Origin是否允許跨域，如果允許則在響應(yīng)頭中說(shuō)明允許該來(lái)源的跨域請(qǐng)求，如下：

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

如果允許任何域名來(lái)源的跨域請(qǐng)求，則響應(yīng)如下：

Plaintext
Access-Control-Allow-Origin：*

解決跨域的方法：

1、JSONP

通過(guò)script標(biāo)簽的src屬性進(jìn)行跨域請(qǐng)求，如果服務(wù)端要響應(yīng)內(nèi)容則首先讀取請(qǐng)求參數(shù)callback的值，callback是一個(gè)回調(diào)函數(shù)的名稱(chēng)，服務(wù)端讀取callback的值后將響應(yīng)內(nèi)容通過(guò)調(diào)用callback函數(shù)的方式告訴請(qǐng)求方。如下圖：

2、添加響應(yīng)頭

服務(wù)端在響應(yīng)頭添加 Access-Control-Allow-Origin：

3、通過(guò)nginx代理跨域

由于服務(wù)端之間沒(méi)有跨域，瀏覽器通過(guò)nginx去訪問(wèn)跨域地址。

1)瀏覽器先訪問(wèn)http://192.168.101.10:8601 nginx提供的地址，進(jìn)入頁(yè)面

2)此頁(yè)面要跨域訪問(wèn)http://192.168.101.11:8601 ，不能直接跨域訪問(wèn)http://www.baidu.com:8601 ，而是訪問(wèn)nginx的一個(gè)同源地址，比如：http://192.168.101.11:8601/api ，通過(guò)http://192.168.101.11:8601/api 的代理去訪問(wèn)http://www.baidu.com:8601。

這樣就實(shí)現(xiàn)了跨域訪問(wèn)。

瀏覽器到http://192.168.101.11:8601/api 沒(méi)有跨域

nginx到http://www.baidu.com:8601通過(guò)服務(wù)端通信，沒(méi)有跨域。

我們準(zhǔn)備使用方案2解決跨域問(wèn)題。在內(nèi)容管理的api工程config包下編寫(xiě)GlobalCorsConfig.java，

或直接從課程資料/項(xiàng)目工程下拷貝，

代碼如下：

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 跨域過(guò)慮器
 * @author Mr.M
 * @date 2022/9/7 11:04
 * @version 1.0
 */
 @Configuration
 public class GlobalCorsConfig {

  /**
   * 允許跨域調(diào)用的過(guò)濾器
   */
  @Bean
  public CorsFilter corsFilter() {
   CorsConfiguration config = new CorsConfiguration();
   //允許白名單域名進(jìn)行跨域調(diào)用
   config.addAllowedOrigin("*");
   //允許跨越發(fā)送cookie
   config.setAllowCredentials(true);
   //放行全部原始頭信息
   config.addAllowedHeader("*");
   //允許所有請(qǐng)求方法跨域調(diào)用
   config.addAllowedMethod("*");
   UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
   source.registerCorsConfiguration("/**", config);
   return new CorsFilter(source);
  }
 }

此配置類(lèi)實(shí)現(xiàn)了跨域過(guò)慮器，在響應(yīng)頭添加Access-Control-Allow-Origin。

重啟系統(tǒng)管理服務(wù)，前端工程可以正常進(jìn)入http://localhost:8601，觀察瀏覽器記錄，成功解決跨域。