跨域問題解決方案

最近自己寫了一個js元件，該js元件是提供給第三方使用的，而js元件中涉及了ajax請求，於是乎就出現了跨域請求問題。下面記錄一下自己的解決路程。

什麼是跨域

參考：跨域請求詳解
個人理解：我理解的跨域就是，兩個不同的ip或者域名，進行訪問和資料交換，此時如果不做處理，便會發生跨域請求問題。詳細解釋看上面連結。

我自己就是因為js提供給其他伺服器進行呼叫，而我的js裡面設計到一個ajax請求，所以在第三方伺服器呼叫我的js進行操作的時候，就設計到了兩個伺服器之間的資料互動問題，即跨域問題。

定位跨域問題

瞭解了什麼是跨域，那麼怎麼定位自己的錯誤是跨域導致的呢？我一般是根據報錯來定位。呼叫js時，我的報錯如下：

跨域解決方案有哪些

目前我瞭解的解決跨域的幾種方式：手寫過濾器，手寫攔截器，jsonnp，註解方式，配置nginx反向代理,共五種解決方式。

1. 手寫過濾器實現（我用的這種）

通過過濾器開放需要訪問的介面（我用的這種，推薦）
（1）寫一個過濾器：

package com.ninesword.utils;

import java.io.IOException;

import javax.servlet.Filter;
import
 
 javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.slf4j.Logger;
import
 
 org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;


@Component
public class CrossFilter implements Filter {
    private static Logger logger = LoggerFactory.getLogger(CrossFilter.class);

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
    @Override
    public void destroy() {
    }
    @Override
    public void doFilter(ServletRequest request, ServletResponse response,
                         FilterChain chain) throws IOException, ServletException {
        logger.debug("跨域請求進來了。。。");
        HttpServletRequest httpServletRequest = (HttpServletRequest) request;
        httpServletRequest.getSession();
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        httpResponse.setHeader("Access-Control-Allow-Origin", "*");
        httpResponse.setHeader("Access-Control-Allow-Methods", "*");
        httpResponse.setHeader("Access-Control-Max-Age", "3600");
        httpResponse.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept, Connection, User-Agent, Cookie");
        httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
        httpResponse.setHeader("Content-type", "application/json");
        httpResponse.setHeader("Cache-Control", "no-cache, must-revalidate");
        chain.doFilter(request, httpResponse);
    }
}

在web.xml中配置過濾器和需要過濾的介面

<!-- 新增過濾器過濾跨域請求 -->
 <filter>
   <filter-name>cors</filter-name>
   <!-- 這裡配置上面剛剛設定的java過濾器檔案 -->
   <filter-class>com.ninesword.utils.CrossFilter</filter-class>
 </filter>
 <filter-mapping>
   <filter-name>cors</filter-name>
   <!-- 這裡配置你需要進行跨域的介面，*代表jsForSdp當前路徑下所子有路徑 -->
   <url-pattern>/jsForSdp/*</url-pattern>
 </filter-mapping>

經過以上配置，已經可以成功跨域了，親測有效哦。

2.使用spring攔截器解決跨域問題

    這個方法，是一個大佬推薦的，我沒有試過。這裡推薦文章：[java-攔截器實現跨域支援](https://blog.csdn.net/zpf0918/article/details/52624813)

3.jsonnp實現（僅適用GET請求，不推薦）

網上各種針對jsonnp實現跨域的文章很多，但是這種，據說只對get請求有效，不推薦。我用的是原聲js寫的元件，jsonnp常見於jquery ajax中，所以，這裡無法解決我的問題，還是說下它怎麼實現的吧。
使用jsonnp還是很簡單的，如果你用的是jquery的話就更好了。

    $.ajax({
            url: "你的url",
            type: 'GET',
            dataType: 'JSONP',//重點在這裡，加上這個屬性就可以跨域請求了
            success: function (data) {
            }
        });

4.註解實現

我的框架是ssh。這裡有註解可以解決跨域問題，本人沒有試過，但是確實簡單有效。推薦連結：
springmvc @crossorigin跨域

5.配置nginx實現

這裡個人推薦的還是第一種解決方式，經過驗證確實有效。如果你有更好的方式或者見解，請留言。謝謝