上传文件的跨域处理(转)

  (文章转自:http://blog.robotercoding.com/?p=62)

 

为了减轻主服务器的负担,希望把图片的处理单独拿出来,由图片服务器来处理图片上传,浏览等操作。图片上传使用了ajax方式,采用了ajaxfileupload控件,它动态生成了一个iframe,由iframe来接受上传结果。以前的操作都在www.***.com上处理,这个控件用得不错,分开之后,由img.***.com来负责上传,结果问题就来了,iframe的contentWindow以及contentDocument下面的document拒绝访问。google之后,发现应该是跨域问题,按照道理来说,两个子域的跨域应该很好解决。无非是设置document.domain,主页面中如下设置:

<script language=”text/javascript”>
document.domain = “***.com”;
</script>

在iframe中的onload事件函数中,也设置了document.domain = “***.com”;测试了一下,行不通,还是会报“拒绝访问”,虽然Firebug已经看到了返回值。对javascript不是很熟悉,不知道iframe中这样设置document.domain是否合法。

然后再google了一堆资料,针对跨域的处理有很多方式:jquery的jsonp技术,动态地添加一个<script>标签,因为script标签的src属性是没有跨域的限制,但是好像只能get,不支持post。还有通过服务器中转,数据先到达www.***.com,由www服务器发送到img服务器进行处理,这样也没有问题,但是数据绕了一圈,费时费力。

这个时候想起了nginx的代理设置,是否能够将www服务器的目录映射成img服务器呢?我想应该可以的,那就尝试一下。

首先给ubuntu装上dns服务器,可以模拟这些域名进行测试。然后配置nginx如下:

upstream hosts_www_com {
server 192.168.1.2:80;
}
server {
listen       80;
server_name  www.***.com;

access_log  /var/log/nginx/***.host.access.log;

location ~ ^/imgupload/ {
proxy_pass        http://192.168.1.129; #图片服务器的ip
proxy_set_header  X-Real-IP  $remote_addr;

proxy_redirect off;

}

location / {
proxy_redirect off;
proxy_set_header Host $host;
proxy_pass http://hosts_www_com;
proxy_set_header  x-real-IP  $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

}

然后再测试一下,OK了。

update:

django中跨域读取cookie,可以直接设置

SESSION_COOKIE_DOMAIN = ‘.abc.com’

注意前缀一定要有点(.)

转载于:https://www.cnblogs.com/Deasel-s-magic-box/archive/2012/09/20/2695288.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-upload 是饿了么前端团队基于 Element UI 组件库开发的文件上传组件。文件上传涉及到跨域问题,主要是因为浏览器的同源策略限制,当上传的目标接口与当前页面的协议、域名或端口不一致时,浏览器会禁止上传操作,这就需要进行跨域处理。 为了解决 el-upload 的跨域问题,可以在服务器端设置相应的 CORS 响应头部信息,允许特定来源的请求进行跨域访问。具体的实现方式可以在服务端设置如下的响应头部信息: ``` Access-Control-Allow-Origin: http://example.com Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: Content-Type ``` 其中,`Access-Control-Allow-Origin` 指定允许跨域访问的来源地址;`Access-Control-Allow-Methods` 指定允许跨域访问的 HTTP 方法;`Access-Control-Allow-Headers` 指定允许跨域访问的请求头部信息。 另外,如果使用的是 Nginx 服务器,可以在 Nginx 配置文件中添加如下代码实现 CORS 处理: ``` location /upload { add_header 'Access-Control-Allow-Origin' 'http://example.com'; add_header 'Access-Control-Allow-Methods' 'POST, GET, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Content-Type'; if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'POST, GET, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Content-Type'; return 200; } } ``` 这里的 `/upload` 是上传文件的接口地址,`http://example.com` 是允许跨域访问的来源地址。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值