跨域問題_跨域問題如何解決？

“ 今天的内容比較大衆，相信廣大程式猿都有遇到過，那麼咱們就不多BB了，直接往下看。”

首先聊聊為什麼會出現跨域問題？跨域是什麼？

域(Domain)是Windows網絡中獨立運作的機關，域之間互相通路則需要建立信任關系(即Trust Relation)。信任關系是連接配接在域與域之間的橋梁。當一個域與其他域建立了信任關系後，2個域之間不但可以按需要互相進行管理，還可以跨網配置設定檔案和列印機等裝置資源，使不同的域之間實作網絡資源的共享與管理。有一種簡明的說法來解釋廣域跨域：跨域通路，簡單來說就是 A 網站的 javascript 代碼試圖通路 B 網站，包括送出内容和擷取内容。由于安全原因，跨域通路是被各大浏覽器所預設禁止的。

01

—

跨域問題

前端通路接口報跨域錯誤：

02

—

解決跨域問題的幾種方法

1.java後端全局配置過濾器

@Configurationpublic class GlobalCorsConfig {    @Bean    public CorsFilter corsFilter() {        CorsConfiguration config = new CorsConfiguration();          config.addAllowedOrigin("*");          config.setAllowCredentials(true);          config.addAllowedMethod("*");          config.addAllowedHeader("*");          config.addExposedHeader("*");        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();        configSource.registerCorsConfiguration("/**", config);        return new CorsFilter(configSource);    }}
           

@Configurationpublic class MyConfiguration extends WebMvcConfigurerAdapter  {  @Override      public void addCorsMappings(CorsRegistry registry) {          registry.addMapping("/**")                  .allowCredentials(true)                  .allowedHeaders("*")                  .allowedOrigins("*")                  .allowedMethods("*");    }  }
           

controller方法加注解CrossOrigin,origin="*"代表所有域名都可通路

@RequestMapping("/tet")@CrossOrigin(origins = "*",maxAge = 3600)public String test( ){  return "本方法支援跨域請求！！！";}
           

2.vue-cli項目 webpack代了解決跨域問題，在vue.config.js檔案中加入如下代碼

// 生成代理配置對象,可配置多個代理位址let proxyObj = {    '/test': {        target: "http://localhost:8080"    },    '/test2': {        target: "http://localhost:8081"    }};module.exports = {    baseUrl: '/',    outputDir: 'dist',    lintOnSave: false,    runtimeCompiler: true,    devServer: {        contentBase: "./",        port: 8080,        disableHostCheck: true,        proxy: proxyObj,        before: app => { }    }}
           

3.jQuery的ajax jsonp解決跨域問題

$.ajax({          type : "get",          async:false,          url : "http://localhost:8080/test",          dataType : "jsonp",//資料類型為jsonp          jsonp: "jsonpCallback",//服務端傳回回調方法名        success : function(data){              alert(JSON.stringify(data));        },          error:function(){              alert('請求錯誤！');          }      });