跨域请求的几种实现方式（实例）

最近要实现一个需求，从某一个系统跳转到另外一个系统，这其中涉及到了跨域，通过网上查找资料和自己的理解实现了该功能，现在做个笔记

方式一：通过a链接直接跳转

<a href="javascript:void(0);" style="color: #0b6190;" onclick="openPostWindow('https://xxxxx/redirectInit.htm','SK201')">SK201</a>

//url要跳转到的页面，data要传递的数据，name显示方式（重开页面或者当前页面跳转）
    function openPostWindow(url, protocolNo) {
        name = "_blank"; // 重新打开一个页面
        var tempForm = $("<form>");
        tempForm.attr("id", "tempForm1");
        tempForm.attr("style", "display:none");
        tempForm.attr("target", name);
        tempForm.attr("method", "post");
        tempForm.attr("action", url);
        var input2 = $("<input>");
        input2.attr("type", "hidden");
        input2.attr("name", "protocolNo");
        input2.attr("value", protocolNo);
        tempForm.append(input2);
        tempForm.trigger("submit");
        $("body").append(tempForm);//将表单放置在web中
        tempForm.submit();
        $("tempForm1").remove();
    };

方式二：通过Ajax方式的jsonp

// js代码            
var mobilephone = $("[name=mobilephone]").val();
if (mobilephone == ""){
  $(".notice").html("请输入手机号！");
  $(".notice").show();
  return false;
}
$.ajax({
   type: "get",
   url: "/login/getYzm.htm",
   dataType:"jsonp",    //跨域json请求一定是jsonp
   jsonp: "callbackparam",    //跨域请求的参数名，默认是callback
   data:{"mobilephone":mobilephone},    //请求参数
   success : function(data){
      var status = data.status;
   }
});

后台代码以及返回数据封装；

方式三：也是通过ajax，后台只需在response添加响应头Header("Access-Control-Allow-Origin", "*")即可

注意：此种方式允许所有域名访问，不安全，不建议使用

js代码：

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
            type: "POST",
            url: "/uploadAssessImg.json",
            data:formData,    //请求参数
            cache: false,
            processData: false,
            contentType: false,
            success : function(result){
                alert(111);
            }
        });

 后台代码：

@ResponseBody
	@RequestMapping(value = "/uploadAssessImg", method = RequestMethod.POST)
	public com.alibaba.fastjson.JSONObject uploadAssessImg(MultipartHttpServletRequest request,HttpServletResponse response) {
		logger.info("跨域请求==========进入方法");
		response.setHeader("Access-Control-Allow-Origin", "*");
		com.alibaba.fastjson.JSONObject jsonObject = null;
		try {
			jsonObject = icommonService.uploadInBatches(request);
			logger.info("跨域请求==========结果返回"+jsonObject.toJSONString());
		} catch (Exception e) {
			logger.info("上传图片异常：" + e.getMessage());
		}

		return jsonObject;
	}

方式四：后台采用拦截器方式

具体地址：拦截器方式解决跨域问题_crossinterceptor-CSDN博客

方式五：使用Nginx解决跨域（推荐）

请看我的另外一篇文章：Nginx解决跨域问题_nginx 一个域名加不同路径访问跨域不同的域名-CSDN博客

方式六：使用document.domain实现 

document.domain 是 JavaScript 的一个属性，用于获取或设置当前文档的域名。它的主要用途是处理跨域问题，即在不同域名下的网页之间进行数据交互。

具体来说，当两个网页的域名、端口和协议都一致时，它们之间可以互相访问数据，这被称为同源策略。然而，在实际开发中，经常会遇到不同域名下的网页需要进行数据交互的情况，这时就需要用到 document.domain 属性。

通过设置 document.domain，可以将当前文档的域名设置为服务器的主机名，从而实现不同域名下的网页之间的跨域访问。例如，如果要将一个子域下的网页与主域下的网页进行跨域访问，可以将子域的网页中的 document.domain 设置为主域的域名，这样两个网页就可以互相访问数据了。

需要注意的是，document.domain 属性的设置有限制，只能设置为当前域名或上级域名，且必须包含一个点号。同时，为了防止恶意修改，浏览器会对 document.domain 属性的设置进行安全限制。

样例：

document.domain=-1<document.domain.indexOf(".xiatengtest")?document.domain.substring(document.domain.indexOf(".xiatengtest")+1):document.domain;