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

红太狼 2023-07-17 09:47 21阅读 0赞

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

### 方式一：通过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;
       }
    });

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDM3NDc4_size_16_color_FFFFFF_t_70][]

### 方式三：也是通过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;
    	}

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

具体地址：[https://blog.csdn.net/qq\_43037478/article/details/115947164][https_blog.csdn.net_qq_43037478_article_details_115947164]

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

请看我的另外一篇文章：[https://blog.csdn.net/qq\_43037478/article/details/110230181][https_blog.csdn.net_qq_43037478_article_details_110230181]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDM3NDc4_size_16_color_FFFFFF_t_70]: /images/20230528/0aef00d76643482ea364d07f3af149d7.png
[https_blog.csdn.net_qq_43037478_article_details_115947164]: https://blog.csdn.net/qq_43037478/article/details/115947164
[https_blog.csdn.net_qq_43037478_article_details_110230181]: https://blog.csdn.net/qq_43037478/article/details/110230181