跨域問題

最怕万一见温柔發表於2024-03-10
跨域

一、什麼是跨域問題

在瀏覽器端進行 Ajax 請求時會出現跨域問題，那麼什麼是跨域，如何解決跨域呢？先看瀏覽器端出現跨域問題的現象，如下圖所示

img

1.什麼是跨域問題？

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

2.什麼是同源？

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

  • http://www.qf.com/ –> http://admin.qf.com/ 跨域
  • http://www.qf.com/ –> http://www.qf.com/ 非跨域
  • http://www.qf.com/ –> http://www.qf.com:8080/ 跨域
  • http://www.qf.com/ –> https://www.qf.com/ 跨域

3.如何解決跨域問題？

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

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

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

2)使用 JSONP 解決跨域問題

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

3)CORS 與 JSONP 的比較

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

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

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

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

Nginx 配置跨域案例，在 nginx.conf 的 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;

如：

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

二、SpringMVC 配置 CORS

<mvc:cors>  
    <mvc:mapping path="/**"
        allowed-origins="*"
        allowed-methods="POST, GET, OPTIONS, DELETE, PUT,PATCH"
        allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
        allow-credentials="true" />
</mvc:cors>

在spring-mvc.xml中加入上述這一段。其中，allowed-origins指的是允許的訪問源的域名，"*"表示任何人都可以訪問，也可以指明具體的域名，比如下圖：

img

三、攔截器的方式配置解決跨域

import lombok.extern.slf4j.Slf4j;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@Slf4j
public class CorsInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object o) throws Exception {
        System.out.println("CorsInterceptor.preHandle");
        return true;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object o, ModelAndView modelAndView) throws Exception {
        // Access-Control-Allow-Origin
        String origin = request.getHeader("Origin");
        System.out.println("origin.........."+origin);

        response.setHeader("Access-Control-Allow-Origin", origin);
        response.setHeader("Vary", "Origin");

        // Access-Control-Max-Age
        response.setHeader("Access-Control-Max-Age", "3600");

        // Access-Control-Allow-Credentials
        response.setHeader("Access-Control-Allow-Credentials", "true");

        // Access-Control-Allow-Methods
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");

        // Access-Control-Allow-Headers
        response.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type,Accept,X-Custom-Header,Set-Cookie");


    }

    @Override
    public void afterCompletion(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, Exception e) throws Exception {
        System.out.println("CorsInterceptor.afterCompletion");
    }
}

四、Spring Boot 配置 CORS

1.使用 Java 配置的方式

/**
 * 跨域配置
 * <p>Title: CorsConfiguration</p>
 * <p>Description: </p>
 */
@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)

3.解決跨域後的效果圖

img

相關文章