java-解決跨域問題

今天剛在項目中解決了跨域，記錄下

首先了解下相關知識

$.ajax    jQuery的異步請求

    

jsonp ：指定跨域異步請求時，後臺接收參數名稱，默認爲callback

dataType：請求數據類型 -- 經常使用json,text,html 跨域請求時使用jsonp

jsonpCallback：指定使用jsonp時返回結果會調用哪一個方法來執行

後臺相關知識

contentType ：普通json調用時，使用 application/json

                      ：跨域調用時由於返回結果後jQuery還會調用函數，因此使用 application/javascript

 

大概解決流程

前端：

/**
 * Created by on 2017/5/6.
 */
define(['jquery', 'config'], function ($, config, module) {
    //跨域回調
    function jsonpCallback(res) {
        return res;
    }

    return {
        send: function (url, data, successFn, params) {
            var req = {
                url: config.serverUrl + url,
                data: data || {},
                dataType: "json",
                success: function (res) {
                    jsonpCallback(res); //回調函數處理
                    //執行狀態判斷
                    if (res.respCode == '0000') {
                        successFn(res);
                    } else {
                        alert(res.respDesc);
                    }
                },
                error: function (xhr, status) {
                    //顯示錯誤提示
                    alert("網絡錯誤");
                }
            }

            if (typeof(params) === 'undefined') {
                params = {};
            }

            if (!params.async) {
                req.async = true;
            }
            if (!params.contentType) {
                req.contentType = undefined;
            }
            if (params.isUpload) {
                req.url = config.uploadUrl + url;
            }
            if (!params.method) {
                req.method = 'POST';
            }

            if (params.dataType) {
                req.dataType = params.dataType;
            }

            var options = {
                user_token: config.appContext.user_token
            }

            req.data = $.extend(options, req.data);

            this.doRequest(req);

        },
        doRequest: function (params) {
            $.ajax({
                url: params.url,
                async: params.async,
                data: params.data,
                timeout: 10000,
                dataType: params.dataType,
                jsonpCallback: "jsonpCallback", //指定回調函數
                contentType: params.contentType || 'application/x-www-form-urlencoded',
                success: params.success || null,
                error: params.error || null
            });
        }
    }
});

後臺處理代碼

package org.roundchat.client.common.pipeline;

import java.io.PrintWriter;

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

import org.home.common.model.ResponseData;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;

import com.alibaba.citrus.service.pipeline.PipelineContext;
import com.alibaba.citrus.service.pipeline.Valve;
import com.alibaba.citrus.util.StringEscapeUtil;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.serializer.SerializerFeature;


public class JsonpCallBackPipeline implements Valve{

	private static final String DEFAULT_CONTENT_TYPE = "application/json";
	private static final String DEFAULT_JAVASCRIPT_CONTENT_TYPE = "application/javascript";
	
	private String contentType;
	private String callbackContentType;
	
    @Autowired
    private HttpServletResponse response;
    @Autowired
    private HttpServletRequest request;
	
	public void invoke(PipelineContext pipelineContext) throws Exception {
		ResponseData respData = (ResponseData) pipelineContext.getAttribute("result");
		
		PrintWriter out = response.getWriter();
		response.setContentType(DEFAULT_CONTENT_TYPE);
		String callback = request.getParameter("callback");
		callback = StringEscapeUtil.escapeHtml(callback);
		
		if(!StringUtils.isEmpty(callback)) {
			response.setContentType(DEFAULT_JAVASCRIPT_CONTENT_TYPE);
			out.print(callback + "(" + backContent + ");");
		} else {
			out.print(backContent);
		}
	}

	public String getContentType() {
		return contentType == null ? DEFAULT_CONTENT_TYPE : contentType;
	}

	public void setContentType(String contentType) {
		this.contentType = contentType;
	}

	public String getCallbackContentType() {
		return callbackContentType == null ? DEFAULT_JAVASCRIPT_CONTENT_TYPE : callbackContentType ;
	}

	public void setCallbackContentType(String callbackContentType) {
		this.callbackContentType = callbackContentType;
	}

	public HttpServletResponse getResponse() {
		return response;
	}

	public void setResponse(HttpServletResponse response) {
		this.response = response;
	}


}

 

後臺使用的是webx 其餘框架同理。