博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
「JavaScript」JS两种服务端相关跨域方法详解
阅读量:7005 次
发布时间:2019-06-27

本文共 1914 字,大约阅读时间需要 6 分钟。

之前我们讲了一下四种 JavaScript 跨域的方式 - 。这四种方式是使用纯 JavaScript 来进行跨域的。

今天就介绍两种有涉及到服务器的跨域技术。

一、反向代理服务器

基础思想很简单,将你的服务器配置成 需要跨域获取的资源的 反向代理服务器。

也就是说,将其他域名的资源映射到你自己的域名之下,这样浏览器就认为他们是同源的。

用大家钟爱的 Apache2 来举个例子:

首先启用两个模块 proxy 和 proxy_http 来开启代理功能:

sudo a2enmod proxysudo a2enmod proxy_http

然后在配置文件里面写入:

ProxyPass "/foo" "http://foo.example.com/bar"ProxyPassReverse "/foo" "http://foo.example.com/bar"
  • ProxyPass: 远程服务器在本地服务器的映射。(上面的例子将 http://foo.example.com/bar 映射为 /foo

  • ProxyPassReverse: 配置 Apache2 在 HTTP 跳转时调整 Location, Content-LocationURI headers 的值,防止反向代理被绕开。

重启 Apache2:

sudo service apache2 restart

大功告成,这样我们请求 /foo 就会得到 http://foo.example.com/bar 的内容了。

这种方法其实不太常用,机智的读者就会发现,每一个资源都要到自己的服务器配置,每次配置都还要重启。

二、CORS

Cross-Origin Resource Sharing 是 W3C 推出的一种跨站资源获取的机制。

首先我们来看一下浏览器的支持情况:

Chrome Firefox (Gecko) Internet Explorer Opera Safari
4 3.5 8 & 9(XDomainRequest), 10 12 4

移动端的浏览器对这种方法的支持比较完善。

现在我们看到了,如果不需要兼容 IE6、7的话,就可以使用这种方法。


这种跨域方案主要的思想是:服务器 在响应头中设置相应的选项,浏览器如果支持这种方法的话就会将这种跨站资源请求视为合法,进而获取资源。

可以设置的响应头信息:

Access-Control-Allow-Origin

Access-Control-Allow-Origin: 
| *

origin: 被允许跨域访问这个资源的网站,* 代表全部网站。浏览器会检测这个参数,如果符合要求,才会去获取资源。

举个例子,允许 来跨域访问这个资源:

Access-Control-Allow-Origin: http://jasonkid.github.io/fezone

Access-Control-Allow-Credentials

Access-Control-Allow-Credentials: true | false

表示是否允许浏览器携带 Cookie 来访问这个资源。

这个属性要和 XMLHttpRequestwithCredentials 属性来配合使用。

var xhr = new XMLHttpRequest();var url = 'http://foo.other/resources/credentialed-content/';    if(xhr) {    xhr.open('GET', url, true);    xhr.withCredentials = true; // 设置带有 Cookie 的资源请求    xhr.onreadystatechange = handler;    xhr.send(); }

能够成功使用带有 Cookie 的资源请求需要满足以下几个条件:

  • XMLHttpRequest 对象中指定了 withCredentials = true

  • 服务器响应头中 Access-Control-Allow-Credentials: true

  • 服务器响应头中 Access-Control-Allow-Origin 不能为 *


以下选项主要是安全性配置的问题,主要是服务器的配置问题了,就不展开介绍了:

  • Access-Control-Expose-Headers

  • Access-Control-Allow-Methods

  • Access-Control-Allow-Headers

其他四种跨域方式

转载地址:http://xxytl.baihongyu.com/

你可能感兴趣的文章
webservice 协议
查看>>
SAR-303 xml validator验证框架
查看>>
牛腩学用MUI做手机APP
查看>>
WCF--安全小见解...
查看>>
C# Type.GetConstructor() 根据构造函数参数获取实例对象(一)
查看>>
针对各地项目icomet停止服务的临时处理办法
查看>>
Spring源代码解析
查看>>
搞明白这八个问题,Linux系统就好学多了
查看>>
Android Weekly Notes Issue #222
查看>>
CAD字体显示问号的解决办法
查看>>
微信支付开发(1) JS API支付V3版(转)
查看>>
利用tween,使用原生js实现模块回弹动画效果
查看>>
InfluxDB源码目录结构解析
查看>>
Mysql连接错误:Lost connection to Mysql server at 'waiting for initial communication packet'
查看>>
使用hosts.allow和hosts.deny实现简单的防火墙
查看>>
Javascript将字符串日期格式化为yyyy-mm-dd的方法 js number 类型 没有length 属性 string类型才有...
查看>>
磁波刀和海扶刀的区别
查看>>
MYSQL MVCC实现及其机制
查看>>
mysql 锁的粒度
查看>>
植物大战僵尸,建议加一个feature,抖一抖就把所有太阳都收了
查看>>