jQuery Ajax 跨域请求

来源：互联网发布：数据库备份类型编辑：程序博客网时间：2024/04/29 06:51

好记忆不如按烂笔头... ...

今天接到一个项目，让通过ajax 的方式去访问南方某公司，某系统的数据，所有东东都在html上展示，没有后台的操作。

给定了个url，规定传递的参数，其他就没有其他了，哥也不管那么多了，直接在html上写个ajax ，直接调用：

$(function(){
       $("#login").click(function(){
           var username = $("#username").val();
           var password = $("#password").val();
           if (username==null || username=="") {
               $("#usernameTag").html("请输入用户名之后再提交!");
               return false;
           }else{
               $("#usernameTag").html("");
           }

           if (password==null || password=="") {
               $("#passwordTag").html("请输入密码之后再提交!");
               return false;
           }else{
               $("#passwordTag").html("");
           }

           $.ajax({
               type: "POST",
               url: "http://xxxx/login",
               data: {"username":username,"password":password},
               dataType:"json",
               async : false,
               success: function(msg){
                  alert(msg);
               }
           });
       });
   });

哥点击了下都没有提任何的提示，哥就迅速到FF上一看，我去，403 ，不让访问，妹子，你觉得哥好欺负，这么玩我。

果断找到妹子，妹子告诉哥，要加个headers 的 HTTP_AUTHORIZATION 信息，也就ajax跨域请求的时候，需要设置请求头信息。

哥去查了下jquery的api ，好像额米有设置这玩意的东西，然后哥就去度娘上查看了。顺便把过程记录下；

jQuery API 上没有直接说设置哪里可以设置headers信息，但是他的beforeSend 方法却说：在发送请求之前调用，

并且传入一个XMLHttpRequest作为参数... ... 欧克，哥知道如何去做了！

1.只访问一次，需要的添加headers信息，那就不用那么麻烦了。

// Request with custom header
$.ajax({
url: 'url',
headers: { 'HTTP_AUTHORIZATION': 'Token a9baf4e0fc59d29a203fd7cb8ced23a3cbb5d78a' }
});

2. 如果是给每个ajax的请求都设置一个默认的headers，那就如此操作：

$.ajaxSetup({
headers: { 'HTTP_AUTHORIZATION': 'Token a9baf4e0fc59d29a203fd7cb8ced23a3cbb5d78a' }
});

// Sends your custom header
$.ajax({ url: 'url' });

// Overwrites the default header with a new header
$.ajax({ url: 'url', headers: { 'x-some-other-header': 'some value' } });

3.如果是给每个ajax的请求都设置一个自己的headers，那就如此操作：

$.ajaxSetup({

        beforeSend: function(xmlhttp) {
        xmlhttp.setRequestHeader('HTTP_AUTHORIZATION', 'Token a9baf4e0fc59d29a203fd7cb8ced23a3cbb5d78a');
      xmlhttp.setRequestHeader('Access-Control-Allow-Origin', "www.baidu.com");
      }
});

// Sends your custom header
$.ajax({ url: 'url' });

// Sends both custom headers
$.ajax({ url: 'url', headers: { 'x-some-other-header': 'some value' } });

以上三种可以根据实际情况去选用，但是具体适用方式基本都是如此，无非就是多加几个设置罢了。

如此往上已添加，OK 了，能访问远程的url了，可是没有东西，哥一看，我去，500 ，就潇洒的给

妹子来了句：妹子 500 了，哥能做的就这些了，你的server 你自己来吧。

notes:

啃爹1、那边要求的是post提交方式，但是按照上面的这种设置，调试发现，方法变成了:Options,这是操蛋的很了，怎么回事？

随后加了：

document.domain = “访问的URL” ; 发现可以在FF上显示post 提交方式了。

啃爹2，本机的FF上调试是POST 了，但是到他那边的服务器就options了，哥真的是无语，真正找寻解决方案。

今天尝试了下，使用如下方式也可以实现ajax 的跨域请求：

$.ajax({
             url:"http://xxxxl/list",
              type: "POST",
              dataType:"json",
              data:{"uid":uid},
              async: false,
              headers: {
               "Authorization":"Token a9baf4e0fc59d29a203fd7cb8ced23a3cbb5d78a", //内容的Authorization
               "Content-Type":"application/x-www-form-urlencoded" //请求内容头
              },
              success:function(object){
                if (object.success==true) {
                    alert("评论成功!");

                }else{
                    alert(object.msg);

                }
            },
            error: function() {
               alert(" bad request!");

            }
        });

好些东西，真的是不去尝试，不知道怎么运用.

0 0