Ajax请求跨端口问题的描叙及解决

phfile项目结构:
这里写图片描述

view里的接口定义:
这里写图片描述

以8080启动phfile项目.
浏览器访问:http://127.0.0.1:8080/test/
可以得到正确的结果:

{"status": 0,"data": "上传的图片名错误"}

还有一个phfile2的项目,和phfile项目基本一样,phfile2里有个task.html,
task.html里有个ajax请求:

"url": "http://127.0.0.1:8080/test/",
"data": params,
"type": 'POST',
"dataType": 'json',
"success": function (data) {
    if (data.status == 1) {
        alert("上传成功");
        location.reload(true);
    } else {
        alert('上传失败:'+data.data);
    }
    $('#file_modal').modal('hide');                     
},
"error": function (xhr, status, error) {
    alert("上传错误:" + error);
    $('#file_modal').modal('hide');
}

以8000启动phfile2项目.

调用结果:
1,statua返回0,readystate也为0,responseText返回error,永远弹出”上传错误:”
2,服务器的test方法正常执行.

test>>>>>>>>>>>>>>......
[31/Oct/2016 20:22:21] "POST /test/ HTTP/1.1" 200 73

3,将test方法从phfile移动到phfile2,将调用url改成:”url”: “http://127.0.0.1:8000/test/“后,
task.html弹出”上传失败:上传的图片名错误”

原因:
1.跨端口导致跨域问题.
跨域不只是说跨不同的域,而是包括协议、主机ip、端口三个。
tomcat服务器不存在此类问题,tomcat服务器的cors设置了同ip不同port可以访问。
而我使用的django自带的开发服务器,没有设置cors。

2.ajax访问时session为null(该原因已排除)
事实上ajax请求时request.session对象并不是null,但是request.session.session_key为None,这就意味着,这个session确实是个空session,因为session_key是session的唯一标识.
反之,通过浏览器访问时,可以看到session_key是一个字符串.
在网上有找到该问题的解释(不怎么读的通,大致能看明白就好):
1、系统的中的session为null所引起的主要因素。
2、当ajax请求时遇到session的都会只进不出了(只调用未返回值),就是会出现status=0
3、当出现错误不能抛出处理时,就会进入global中,applicationEnd此时就是程序结束,ajax也将先一步退出,并调用ajax的errorCallback

解决:
1.response添加”Access-Control-Allow-Origin”

@csrf_exempt
def test(request):
    response=HttpResponse(json_encode({"status":0,"data":"上传的图片名错误"}))
    response["Access-Control-Allow-Origin"] = "http://127.0.0.1:8000"
    print "test>>>>>>>>>>>>>>......"
    return response

转载于:https://my.oschina.net/tangzhichao/blog/781507

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当使用 jQuery 的 AJAX 发送 POST 请求时,如果请求的地址是域的,浏览器会拦截该请求,因为浏览器有同源策略,不允许请求解决问题的方法有很多种,其中一种常用的方法是通过前端代理来转发请求。具体步骤如下: 1. 在前端项目中设置一个代理服务器。 2. 在代理服务器上开启一个接口,用于接收前端发送的请求。 3. 在代理服务器上发送一个 AJAX 请求到目标地址,并将目标地址的响应返回给前端。 4. 在前端代码中将请求地址改为代理服务器的地址。 下面是使用 Express 框架实现一个简单的代理服务器的示例代码: ```javascript const express = require('express'); const request = require('request'); const app = express(); app.post('/api/proxy', (req, res) => { // 获取前端发送的 POST 请求数据 const postData = req.body; // 目标地址 const targetUrl = 'http://example.com/api'; request.post({ url: targetUrl, json: postData }, (err, response, body) => { if (err) { console.error(err); return res.status(500).send('Proxy error'); } // 将目标地址的响应返回给前端 res.send(body); }); }); app.listen(3000, () => { console.log('Proxy server is running on port 3000'); }); ``` 在前端代码中,将请求地址改为代理服务器的地址即可: ```javascript $.ajax({ url: 'http://localhost:3000/api/proxy', type: 'POST', data: { key1: 'value1', key2: 'value2' }, success: (data) => { console.log(data); }, error: (xhr, textStatus, errorThrown) => { console.error(xhr, textStatus, errorThrown); } }); ``` 注意:上述示例代码中使用了 Express 框架和 request 模块,请确保安装了这两个模块。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值