關於跨域，和跨域問題的完整解決方案

概念

跨域：瀏覽器對javascript的同源策略的限制，同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSRF等攻擊。所謂的同源是指，域名、協議、端口均爲相同。，即便兩個不同的域名指向同一個ip地址，也非同源。

同源限制的行爲有

• Cookie、LocalStorage 和 IndexDB 無法讀取
• DOM 和 JS 對象無法獲取
• Ajax請求發送不出去

如下報錯，即爲跨域問題

跨域的原因

跨域原因	示例
域名不同	www.jd.com與www.taobao.com
域名相同，端口不同	www.jd.com:8080與www.jd.com:8081
二級域名不同	item.jd.com與miaosha.jd.com

http和https也屬於跨域

爲什麼會有跨域問題

跨域不一定出現跨域問題，一個頁面發起的ajax請求，只能是與當前頁域名相同的路徑，這能有效的組織跨站攻擊

跨域問題的解決方案

前端

• Jsonp

<script>
var script = document.createElement('script');
script.type = 'text/javascript';

// 傳參並指定回調執行函數爲onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);

// 回調執行函數
function onBack(res) {
    alert(JSON.stringify(res));
}
</script>

後端

• CORS

增加配置類 TestCorsConfiguration.java

package com.test.gateway.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;

@Configuration
public class TestCorsConfiguration {

    @Bean
    public CorsFilter corsFilter(){
        //初始化配置對象
        CorsConfiguration configuration = new CorsConfiguration();
        //允許跨域的域名，如果要攜帶cookie,不能寫*。*：代表所有域名都可以跨域訪問

        configuration.addAllowedOrigin("http://manage.test.com");
        configuration.setAllowCredentials(true);//設置是否允許攜帶cookie
        configuration.addAllowedMethod("*");//代表所有的請求方法
        configuration.addAllowedHeader("*");//允許攜帶所有頭信息


        //初始化cors配置源對象
        UrlBasedCorsConfigurationSource configurationSource =new UrlBasedCorsConfigurationSource();
        configurationSource.registerCorsConfiguration("/**",configuration);
        //返回實例，參數cors配置源對象
        return new CorsFilter(configurationSource);
    }
}

運維

• nginx反向代理

因爲比較簡單，這裏就不展示Nginx的解決方案了

小結

跨域未必會出現跨域問題，跨域的解決方案有很多，後端和前端都可以，我比較喜歡從後端解決這個問題呢，除了以上列出的方案還有其他的解決辦法，一個問題有很多解決辦法，從中找最優解吧。