首頁技術(shù)文章正文

如何解決瀏覽器跨域問題?

更新時間:2023-03-15 來源:黑馬程序員 瀏覽量:

瀏覽器判斷是跨域請求會在請求頭上添加origin,表示這個請求來源哪里。比如:

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

服務(wù)器收到請求判斷這個Origin是否允許跨域,如果允許則在響應(yīng)頭中說明允許該來源的跨域請求,如下:

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

如果允許任何域名來源的跨域請求,則響應(yīng)如下:

Plaintext
Access-Control-Allow-Origin:*

解決跨域的方法:

1、JSONP

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

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

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

3、通過nginx代理跨域

由于服務(wù)端之間沒有跨域,瀏覽器通過nginx去訪問跨域地址。

1678851748704_圖片2.png

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

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。

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

瀏覽器到http://192.168.101.11:8601/api 沒有跨域

nginx到http://www.baidu.com:8601通過服務(wù)端通信,沒有跨域。

我們準(zhǔn)備使用方案2解決跨域問題。在內(nèi)容管理的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 {

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

此配置類實現(xiàn)了跨域過慮器,在響應(yīng)頭添加Access-Control-Allow-Origin。

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

1678851830143_圖片3.png

分享到:
在線咨詢 我要報名
和我們在線交談!