什麼是跨域問題？

      跨域，指的是瀏覽器不能執行其他網站的指令碼。它是由瀏覽器的同源策略造成的，是瀏覽器對 JavaScript 施加的安全限制。

什麼是同源？

所謂同源是指，域名，協議，埠均相同

• http://www.wzhu.tk –> http://admin.wzhu.tk 跨域
• http://www.wzhu.tk –> http://www.wzhu.tk 非跨域
• http://www.wzhu.tk –> http://www.wzhu.tk:8080 跨域
• http://www.wzhu.tk –> https://www.wzhu.tk 跨域

如何解決跨域問題？

使用 CORS（跨資源共享）解決跨域問題

CORS 是一個 W3C 標準，全稱是”跨域資源共享”（Cross-origin resource sharing）。它允許瀏覽器向跨源伺服器，發出 XMLHttpRequest 請求，從而克服了 AJAX 只能同源使用的限制。

CORS 需要瀏覽器和伺服器同時支援。目前，所有瀏覽器都支援該功能，IE 瀏覽器不能低於 IE10。整個 CORS 通訊過程，都是瀏覽器自動完成，不需要使用者參與。對於開發者來說，CORS 通訊與同源的 AJAX 通訊沒有差別，程式碼完全一樣。瀏覽器一旦發現 AJAX 請求跨源，就會自動新增一些附加的頭資訊，有時還會多出一次附加的請求，但使用者不會有感覺。因此，實現 CORS 通訊的關鍵是伺服器。只要伺服器實現了 CORS 介面，就可以跨源通訊（在 header

使用 JSONP 解決跨域問題

JSONP（JSON with Padding）是 JSON 的一種“使用模式”，可用於解決主流瀏覽器的跨域資料訪問的問題。由於同源策略，一般來說位於 server1.example.com的網頁無法與 server2.example.com 的伺服器溝通，而 HTML 的 <script> 元素是一個例外。利用 <script> 元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並不是 JSON，而是任意的 JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析（需要目標伺服器配合一個 callback

CORS 與 JSONP 的比較

CORS 與 JSONP 的使用目的相同，但是比 JSONP 更強大。

JSONP 只支援 GET 請求，CORS 支援所有型別的 HTTP 請求。JSONP 的優勢在於支援老式瀏覽器，以及可以向不支援 CORS 的網站請求資料。

使用 Nginx 反向代理解決跨域問題

以上跨域問題解決方案都需要伺服器支援，當伺服器無法設定 header 或提供 callback 時我們就可以採用 Nginx 反向代理的方式解決跨域問題。

Nginx 配置跨域案例

在 nginx.conf 的 location 中增加如下配置：

user  nginx;
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen 80;
        server_name wzhu.tk;
        location / {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Headers X-Requested-With;
            add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

            root /usr/share/nginx/wwwroot/cdn;
            index index.jsp index.html index.htm;
        }
    }
}

springboot解決案例

1.重寫WebMvcConfigurerAdapter中的 addCorsRegistryMappings

   1）

@Configuration
public class CORSConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")    //匹配了所有的URL
                        .allowedHeaders("*")  //允許跨域請求包含任意的頭資訊
                        .allowedMethods("*")  //允許外域發起請求任意HTTP Method
                        .allowedOrigins("*"); //允許所有的外域發起跨域請求
            }
        };
    }
}

2）

@Configuration
public class CORSConfiguration extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(false).maxAge(3600);
    }
}

2.通過註解方式

@CrossOrigin(origins = "*", maxAge = 3600)