HTTP解決跨域問題,成功解決Ajax跨域獲取不到后端傳送的Token


首先我們考慮后端是夠允許跨域請求,

本人編寫了一個過濾器代碼如下:

package com.rbac.filter;

import java.io.IOException;
import java.io.OutputStream;

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.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.stereotype.Component;

import com.rbac.aop.MessageExption;


/**
 * 處理跨域的問題  處理非SpringSecurity處理之外的跨域請求
 * @author admin
 *
 */
@Component
public class OriginFilter implements Filter {

        Log logger=LogFactory.getLog(OriginFilter.class);
    
    
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain arg2)
            throws IOException, ServletException {
                HttpServletResponse response=(HttpServletResponse)res;
                HttpServletRequest request=(HttpServletRequest)req;
                 if (request.getMethod().equals("OPTIONS")) {
                        response.setStatus(HttpServletResponse.SC_OK);
                    }
                
                 String origin = request.getHeader("Origin");
                 System.out.println(origin);
                // 瀏覽器 跨域 請求  Access-Control-Allow-Credentials 要設置為true 允許客戶端攜帶跨域cookie,  Access-Control-Allow-Origin 此時 origin值不能為“*”,只能為指定單一域名
                //response.setH    eader("Access-Control-Allow-Origin", "http://ailer.oicp.io");
                response.setHeader("Access-Control-Allow-Origin", "*");// 允許指定域訪問跨域資源
                //是否允許cookie
                //response.setHeader("Access-Control-Allow-Credentials", "true");     //
                response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
                response.setHeader("Access-Control-Max-Age", "18000");//Access-Control-Max-Age用來指定本次預檢請求的有效期,單位為秒,,在此期間不用發出另一條預檢請求。
                response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization");
                response.setHeader("Access-Control-Expose-Headers", "*");//響應客戶端的頭部 允許攜帶Token 等等
                response.setContentType("application/json; charset=utf-8");
                response.setCharacterEncoding("UTF-8");
                logger.info("允許跨域");
                
            
                try {
                    arg2.doFilter(req, res);    
                
                } catch (MessageExption e) {
                    response.setContentType("application/json; charset=utf-8");
                    response.setCharacterEncoding("UTF-8");
                    OutputStream out = response.getOutputStream();
                    String message=e.message;
                    out.write(message.getBytes("UTF-8"));
                    out.flush();
                    
                }
                
        
        
    }


    @Override
    public void destroy() {
        // TODO Auto-generated method stub
        
    }


    @Override
    public void init(FilterConfig arg0) throws ServletException {
        // TODO Auto-generated method stub
        
    }

}

前端的代碼也附上

 $.ajax({
            url:"http://127.0.0.1/authentication/form",
            timeout : 20000,
            type:"post",
            dataType:"json",
            data:{
                username:"088358",password:"123"
            },
            success:function(data,textStatus,xhr){
            // 查看全部的  headers var headers=xhr.getAllResponseHeaders();
                if(data.code="000000"){
                    alert('登錄成功');
                    var headers=xhr.getAllResponseHeaders();//獲取全部 后端返回的 參數 包括token
                    console.log(headers);
                    var authorization= xhr.getResponseHeader('Authorization')//獲取token  名字你們自己定
                    console.log(authorization);
                    localStorage.setItem('token',authorization);
                }else{
                    alert('登錄失敗');
                }
              /*  var token=xhr.getResponseHeader('Authorization');
                localStorage.setItem('token',token);*/
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert("1 異步調用返回失敗,XMLHttpResponse.readyState:"+XMLHttpRequest.readyState);
                alert("2 異步調用返回失敗,XMLHttpResponse.status:"+XMLHttpRequest.status);
                alert("3 異步調用返回失敗,textStatus:"+textStatus);
                alert("4 異步調用返回失敗,errorThrown:"+errorThrown);
            }
        })

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM