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

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

更新時(shí)間:2023-03-15 來(lái)源:黑馬程序員 瀏覽量:

瀏覽器判斷是跨域請(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ù)的名稱,服務(wù)端讀取callback的值后將響應(yīng)內(nèi)容通過(guò)調(diào)用callback函數(shù)的方式告訴請(qǐng)求方。如下圖:
1678851693396_圖片1.png

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

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

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

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

1678851748704_圖片2.png

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);
  }
 }

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

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

1678851830143_圖片3.png

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!