「JavaScript」JS两种服务端相关跨域方法详解

kid143 发布于2019-08-21 10:39 / 324人阅读

摘要：之前我们讲了一下四种跨域的方式四种跨域方式详解。这四种方式是使用纯来进行跨域的。今天就介绍两种有涉及到服务器的跨域技术。

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

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

一、反向代理服务器

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

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

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

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

sudo a2enmod proxy
sudo 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-Location 和 URI 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: 被允许跨域访问这个资源的网站，* 代表全部网站。浏览器会检测这个参数，如果符合要求，才会去获取资源。

举个例子，允许 http://jasonkid.github.io/fezone 来跨域访问这个资源：

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

Access-Control-Allow-Credentials

Access-Control-Allow-Credentials: true | false

表示是否允许浏览器携带 Cookie 来访问这个资源。
这个属性要和 XMLHttpRequest 的 withCredentials 属性来配合使用。

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

其他四种跨域方式

「JavaScript」四种跨域方式详解

GPU云服务器云服务器两种方法迷宫c语言两种方法数据统计的两种方法数据统计有两种基本方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85952.html

「JavaScript」JS四种跨域方式详解

摘要：超详细并且带的跨域指南来了本文基于你了解的同源策略，并且了解使用跨域跨域的理由。使用方法就是将符合上述条件页面的设置为同样的二级域名。这两个网站都是协议，端口都是，且二级域名都是。超详细并且带 Demo 的 JavaScript 跨域指南来了！本文基于你了解 JavaScript 的同源策略，并且了解使用跨域跨域的理由。 1. JSONP 首先要介绍的跨域方法必然是 JSONP。 ...

wangym 2019-08-21 10:38 评论0 收藏0
AJAX的学习笔记

摘要：的学习笔记是异步和的缩写，它的作用是执行异步的网络请求。这就是一个格式的，向这个地址请求，将得到一个回调函数，执行就得到数据。 AJAX的学习笔记 AJAX是异步JavaScript和XML的缩写，它的作用是执行异步的网络请求。因为JS是线性同步，如果需要用户向浏览器发送一个请求，那么就需要等浏览器接收到了结果才能继续运行，如果发送到接受的时间太长，浏览器就会很长时间处于假死状态，这样...

RobinTang 2019-08-22 14:03 评论0 收藏0
解决跨域的两种方案JSONP和CORS

摘要：由于第二种方法如今已经采用的非常少，所以我们在这儿不做讲解一带填充的是一种可以在中绕过同源策略，并发起跨域请求的使用模式，可以启动的跨域请求同源策略有一个显著的例外，脚本元素是可以规避检查的。讲跨域之前，我们先来讲同源策略（SOP），同源策略是网景公司提出的一个著名安全策略。所谓同源就是域名、协议、端口相同。例如http://www.12306.cn中，http就是超文本传输协议，1...

曹金海 2019-08-22 11:05 评论0 收藏0
ajax 和jsonp 不是一码事细读详解

摘要：只有两种数据类型描述符，大括号和方括号，其余英文冒号是映射符，英文逗号是分隔符，英文双引号是定义符。上述两种集合中若有多个子项，则通过英文逗号进行分隔。键值对以英文冒号进行分隔，并且建议键名都加上英文双引号，以便于不同语言的解析。由于Sencha Touch 2这种开发模式的特性，基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。当然了，通过调用强大的PhoneGap插件然后...

张金宝 2019-06-27 16:31 评论0 收藏0