1. 程式人生 > >解決專案中的跨域問題

解決專案中的跨域問題

一、跨域是什麼?

       解釋跨域之前,先了解同源策略,簡單描述是:域名,協議,埠相同。

      跨域的官方解釋是:跨站http請求(Cross-site HTTP request),指發起請求的資源所在域不同於請求指向資源所在域的http請求,即不符合同源策略。

二、什麼情況下需要跨域

從上面的表格中我們可以看出,協議、域名、埠三者之間任意一與當前頁面地址不同都會引起跨域問題。

企業開發中出現跨域問題情況舉例:

1、前後端分離的開發模式中,前後端聯調,前端人員使用本地(http://localhost)呼叫後端準備的聯調環境的服務(http:dmsdbj.com)。

2、當系統龐大,業務複雜時,很可能出現直接呼叫第三方的某些服務來完成業務功能。

三、解決方案

解決跨域有多種方法,在專案實戰中使用過三種方式:Nginx,使用@CrossOrigin註解,過濾器

1、Nginx

使用Nginx做反向代理,www.baidu.com/index.html需要呼叫www.sina.com/server.php,可以寫一個介面www.baidu.com/server.php;

2、@CrossOrigin註解

3、過濾器

使用CORS協議,在spring的web.xml中配置過濾器:

 <!--跨域過濾器 -->
    <filter>
        <filter-name>CORS</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
        <init-param>
            <param-name>cors.allowOrigin</param-name>
            <param-value>*</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedMethods</param-name>
            <param-value>GET, POST, HEAD, PUT, DELETE</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedHeaders</param-name>
            <param-value>Authorization,Accept, Origin,X-Requested-With, Content-Type, Last-Modified</param-value>
        </init-param>
        <init-param>
            <param-name>cors.exposedHeaders</param-name>
            <param-value>Set-Cookie</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportsCredentials</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CORS</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>