最近公司新開發專案是前後端分離專案，前端用的是vue框架，在和前端除錯介面時存在拒絕跨域訪問403的情況。我這裡主要將解決的過程記錄一下。

什麼是跨域

跨域是瀏覽器的同源策略造成的，只要是域名、埠、協議有一不同，就會被當做是不同的域，之間的請求就被當做跨域操作。

設定同源限制主要是為了安全，如果沒有同源限制存在瀏覽器中的cookie等其他資料可以任意讀取，不同域下DOM任意操作，Ajax任意請求的話如果瀏覽了惡意網站那麼就會洩漏這些隱私資料。

解決方案

1.jsonp

需要注意的是這種方式只支援get請求，並不支援post請求。

2.cors

通過使用自定義的HTTP響應頭Header允許介面被跨域請求，實現cors的方式有很多。

第一種方式

這種方式主要是利用cors方式進行配置，這種方式主要是在 nginx.conf 配置檔案中加入header配置，從而達到支援跨域的目的，話不多說，上程式碼。

events{
    worker_connections 1024;
    }

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

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;
    #gzip  on;
    server {
        listen       8888; #自身監聽8888埠
        server_name first;
        location / {
            charset utf-8;          #顯示中文
            add_header 'Access-Control-Allow-Origin' '*'; #允許來自所有的訪問地址
            add_header 'Access-Control-Allow-Credentials' 'true';  #設定為true才會傳送cookie
            add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支援請求方式
            add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
			if ($request_method = 'OPTIONS') {
				return 204;
			}
            proxy_pass http://127.0.0.1:8082; #匹配不到其他地址預設匹配的地址是訪問 8080埠,本地node start啟動的服務
        }
    }
}
 

這種方式注意的是前端發起一次請求，實際上是分為兩次來執行的，第一次是OPTIONS請求來獲取伺服器支援的HTTP請求方式(get、post等)，以及進行跨域請求時的預檢，然後才是獲取資料的(get、post等訪問)。所以這裡將OPTIONS方式訪問的請求不轉給後端，直接返回204。配置完之後就可以通過nginx進行訪問了。

第二種方式

這種方式是在專案裡進行攔截器配置

首先在web.xml中配置攔截器實現類的具體路徑等

<!-- CORS過濾器start -->
	<filter>
		<filter-name>corsFilter</filter-name>
		<filter-class>com.liuhui.filter.CorsFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>corsFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>
	<!-- CORS過濾器end -->
 

然後在自定義攔截器中實現Filter介面，並重寫doFilter方法，如下

@Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse httpServletResponse = (HttpServletResponse) response;
        httpServletResponse.setHeader("Access-Control-Allow-Origin", "http://localhost:9527");
        httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        httpServletResponse.setHeader("Access-Control-Max-Age", "3600");
        httpServletResponse.setHeader("Access-Control-Allow-Headers",
                "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
        httpServletResponse.setHeader("Content-Type","application/json;charset=UTF-8");
        httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");
        chain.doFilter(request, response);
    }

這樣就配置完成了，兩種方式都可以實現。