调用接口 - 解决跨域

什么是跨域?

要了解跨域,先要说说同源策略。同源策略是由 Netscape 公司提出的一个著名的安全策略,所有支持 JavaScript 的浏览器都会使用这个策略,什么是同源?他就是会检查访问资源的 域名,协议,端口是否相同,如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。

同源策略又分为两种:

DOM 同源策略:禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况,不同域名的 iframe 是限制互相访问的。XmlHttpRequest 同源策略:禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。

跨域,指的是从一个域名去请求另外一个域名的资源。即跨域名请求!跨域时,浏览器不能执行其他域名网站的脚本,是由浏览器的同源策略造成的,是浏览器施加的安全限制。

跨域的严格一点来说就是只要协议,域名,端口有任何一个的不同,就被当作是跨域。

为什么要跨域?

跨域也是一种安全策略,默认都是禁止跨域的

跨域解决方案:

  1. 通过 jsonp 跨域
  2. document.domain + iframe 跨域
  3. location.hash + iframe
  4. window.name + iframe 跨域
  5. postMessage 跨域
  6. 跨域资源共享(CORS)
  7. nginx 代理跨域
  8. nodejs 中间件代理跨域
  9. WebSocket 协议跨域
  10. 在服务器端允许跨域

方法一:jsonp

1、使用 jquery 的 getJSON () 方法,需要注意的是,url 中要添加一个参数:callback=?

var id_number = $("#idNumber").val();
var user_name = $("#staffName").val();
var url = "http://127.0.0.1:9188/DataSync/CheckResult?callback=?&SeqNo=1&ChannelID=1003" +
"&ID="+id_number+"&Name="+user_name;    
$.getJSON(url,function(data){
  if(data.result == "00"){
    console.log(data.smsg);
  }
});

2、ajax,dataType:“jsonp”,必须是 get 请求

var url = "http://127.0.0.1:9188/DataSync/CheckResult?callback=?&SeqNo=1&ChannelID=1003" +
"&ID="+id_number+"&Name="+user_name;
$.ajax({
  type:'GET',
  url : url,
  jsonpCallback: 'jsonCallback',
  contentType: "application/json",
  dataType:"jsonp",
  success:function(json){
    alert(json);
  }
});

以上两种方式都需要被调用方在返回 json 的方法中做特殊处理,如下:

$.ajax({
    url : localroot + "/v1/findDisplayData",
    type : 'POST',
    data : {
        searchDate : searchDate,
        productList : productList
    },
    success : function(data) {}
Last modification:April 28th, 2020 at 10:58 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment