接口跨域测试教程-如意册

接口跨域测试教程

GET、POST、AJAX接口跨域测试说明及教程。跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见，比如说通过 style 标签加载外部样式表文件、通过 img 标签加载外部图片、通过 script 标签加载外部脚本文件、通过 Webfont 加载字体文件等等。默认情况下，脚本访问文档属性等数据采用的是同源策略（Same origin policy）。解决AJAX跨域请求的另一个方案请参考 AJAX跨域代理请求程序↗

跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见，比如说通过 style 标签加载外部样式表文件、通过 img 标签加载外部图片、通过 script 标签加载外部脚本文件、通过 Webfont 加载字体文件等等。默认情况下，脚本访问文档属性等数据采用的是同源策略（Same origin policy）。

那么，什么是同源策略呢？如果两个页面的协议、域名和端口是完全相同的，那么它们就是同源的。同源策略是为了防止从一个地址加载的文档或脚本访问或者设置从另外一个地址加载的文档的属性。如果两个页面的主域名相同，则还可以通过设置 document.domain 属性将它们认为是同源的。

随着 Web2.0 和 SNS 的兴起，Web 应用对跨域访问的需求也越来越多，但是，在脚本中进行跨域请求是受安全性限制的，Web 开发人员迫切需要提供一种更安全、方便的跨域请求方式来融合（Mashup）自己的 Web 应用。这样做的一个好处就是可以将请求分摊到不同的服务器，减轻单个服务器压力以提高响应速度；另外一个好处是可以将不同的业务逻辑分布到不同的服务器上以降低负载。
（参考：http://blog.csdn.net/net_lover/article/details/5172509 ）

============================

OPTIONS请求方法的主要用途有两个：
1、获取服务器支持的HTTP请求方法；
2、用来检查服务器的性能。

CORS(跨域资源共享)
CORS是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。

使用CORS的方式非常简单，但是需要同时对前端和服务器端做相应处理。

同域安全策略CORS（Cross-Origin Resource Sharing）是W3C在05年提出的跨域资源请求机制

==========================

ajax跨域请求时，如果请求的是json，就属于复杂请求，因此需要提前发出一次options请求，用以检查请求是否是可靠安全的，如果options获得的回应是拒绝性质的，比如404\403\500等http状态，就会停止post、put等请求的发出。

=========================

Preflighted Requests(预检请求)

Preflighted Requests是CORS中一种透明服务器验证机制。预检请求首先需要向另外一个域名的资源发送一个 HTTP OPTIONS 请求头，其目的就是为了判断实际发送的请求是否是安全的。

下面的2种情况需要进行预检：
1、简单请求，比如使用Content-Type 为 application/xml 或 text/xml 的 POST 请求；
2、中设置自定义头，比如 X-JSON、X-MENGXIANHUI 等。

=========================

如果你的服务器没有处理响应OPTIONS，会有如下的响应：
Connection → keep-alive
Content-Encoding → gzip
Content-Type → text/html
Date → Thu, 30 Jun 2016 04:02:35 GMT
Server → nginx/1.4.6 (Ubuntu)
Transfer-Encoding → chunked

可以看出，缺少了Allow响应头，所以应该有处理这个OPTIONS请求的服务，这个可以直接用nginx做（推荐直接PHP、JAVA返回header头方案），在配置中，加一下如下的配置：

# nginx.conf 的配置(注意：生产环境中有风险，请移除)：在location / { 内添加，形如
location / {
# ajax跨域请求需要的设置--start
if ($request_method = 'OPTIONS') {
    # 注意：如果发起请求的为https://ruyice.com开头的SSL安全页面，则必须为https://ruyice.com
    add_header 'Access-Control-Allow-Origin' 'http://ruyice.com';

add_header 'Access-Control-Allow-Credentials' true;
    add_header 'Access-Control-Allow-Methods' 'POST,GET,PUT,OPTIONS,DELETE';

# 注意：这里必须包含所有ajax提交的自定义header头字段名，字段名不含下划线（ajax提交无自定义header则可以忽略此行），多个则英文逗号分隔，否则请求收不到返回数据
    add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type, SessionID,ASPSESSIONID,ASP.NET_SessionId,JsessionId,PHPSESSID,Authorization,access-token,RuYiCe-DIY-Allow';

return 204;
}
# ajax跨域请求需要的设置--end

index  index.htm index.html index.php;
    # ...其他设置
}
# 参考：https://www.cnblogs.com/hawk-whu/p/6725699.html

===========================

其他注意事项：
1、预检请求与重定向
大多数浏览器不支持针对于预检请求的重定向。如果一个预检请求发生了重定向，浏览器将报告错误：

在浏览器的实现跟上规范之前，有两种方式规避上述报错行为：
  1.在服务端去掉对预检请求的重定向；
  2.将实际请求变成一个简单请求。

如果上面两种方式难以做到，我们仍有其他办法：
  使用简单请求模拟预检请求，用以探查预检请求是否重定向到其他 URL（使用  Response.url 或 XHR.responseURL）；向上一步中获得的 URL 发起请求。不过，如果请求由于缺失 Authorization 字段而引起一个预检请求，则这一方法将无法使用。这种情况只能由服务端进行更改。

2、跨域相关资料网址：
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
https://www.cnblogs.com/hawk-whu/p/6725699.html
http://blog.csdn.net/u013047803/article/details/51355821
http://blog.csdn.net/enter89/article/details/51205752
https://segmentfault.com/q/1010000003116113
http://blog.csdn.net/blueheart20/article/details/45174399
http://www.w3school.com.cn/jquery/ajax_ajax.asp

示范项目源码：点击下载 ↓ 示范项目网站↗ 示范项目接口列表↗

<?php
// 直接PHP、JAVA返回header头实现AJAX跨域接口测试方案：服务器端设置示例PHP源码
// 注意：首次部署后，仍提示跨域问题，则清理浏览器缓存后再进行跨域测试
/**
 * 如意册接口在线管理、测试、调试的示范项目
 * 注意：首次部署后，仍提示跨域问题，则清理浏览器缓存后再进行跨域测试
 * author: libowen
 * for: http://ruyice.com/
 * date: 2017-11
 */
// [ 应用入口文件 ]

// 是否开启调试模式
define('APP_DEBUG', true);

//if(APP_DEBUG){
    // 注意：跨域请求必须的设置（允许从指定域名发来的请求）
    $origin = !empty($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : (!empty($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : '');
    if($origin){
        $ruyice_domain = 'ruyice.com';      // 只允许从指定域名发来的请求
        if($_SERVER['HTTP_HOST'] != $ruyice_domain){
            $parseUrl = parse_url($origin);
            if($ruyice_domain === $parseUrl['host']){
                // 必须包括协议scheme
                $allow_origin = $parseUrl['scheme'] . '://' . $parseUrl['host'];

// 允许指定域名发来的访问请求，即固定限制为客户端网址
                header("Access-Control-Allow-Origin: " . $allow_origin);

header("Access-Control-Allow-Methods: POST,GET,PUT,OPTIONS,DELETE");

// 是否允许请求带有验证信息，如cookie
                header("Access-Control-Allow-Credentials: true");

if('OPTIONS' === strtoupper($_SERVER['REQUEST_METHOD'])){
                    // 支持的请求header字段名
                    header("Access-Control-Allow-Headers: DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type, SessionID,ASPSESSIONID,ASP.NET_SessionId,JsessionId,PHPSESSID,Authorization,access-token,RuYiCe-DIY-Allow");  // 允许自定义的头部，以逗号隔开，不含下划线，大小写不敏感（RuYiCe-DIY-Allow 可更换为需要ajax发送的header字段名，多个则英文逗号分隔，否则浏览器会屏蔽掉返回的结果）

header("HTTP/1.1 204 Accepted");
                    exit;
                }

/*
                // 开放式开发、测试时，可考虑加个header安全验证
                $access_key = 'access-token';   // 自定义（但要在请求的header中包含，且服务器端Access-Control-Allow-Headers包含）
                $access_password = 'access-token-value';
                $access_key = strtoupper(str_replace('-', '_', $access_key));
                if($access_password !== $_SERVER['HTTP_' . $access_key]){
                    header("Content-type: text/html; charset=utf-8");
                    echo json_encode([
                        'code' => 0,
                        'msg' => 'access-token not right! header头的安全验证错误！',
                        'data' => []
                    ]);
                    exit;
                }
                */

// 设置为ajax请求方式
                $_SERVER['HTTP_' . 'X_REQUESTED_WITH'] = 'XMLHttpRequest';
            } else {
                // 非指定域名发来的，则忽略上面的设置
            }
        }
    }
//}

其他参考资料

常见请求头 | Requests Header | Http Header

Header	解释	示例
Accept	指定客户端能够接收的内容类型	Accept: text/plain, text/html
Accept-Charset	浏览器可以接受的字符编码集。	Accept-Charset: iso-8859-5
Accept-Encoding	指定浏览器可以支持的web服务器返回内容压缩编码类型。	Accept-Encoding: compress, gzip
Accept-Language	浏览器可接受的语言	Accept-Language: en,zh
Accept-Ranges	可以请求网页实体的一个或者多个子范围字段	Accept-Ranges: bytes
Authorization	HTTP授权的授权证书	Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
Cache-Control	指定请求和响应遵循的缓存机制	Cache-Control: no-cache
Connection	表示是否需要持久连接。（HTTP 1.1默认进行持久连接）	Connection: close
Cookie	HTTP请求发送时，会把保存在该请求域名下的所有cookie值一起发送给web服务器。	Cookie: $Version=1; Skin=new;
Content-Length	请求的内容长度	Content-Length: 348
Content-Type	请求的与实体对应的MIME信息	Content-Type: application/x-www-form-urlencoded
Date	请求发送的日期和时间	Date: Tue, 15 Nov 2017 08:12:31 GMT
Expect	请求的特定的服务器行为	Expect: 100-continue
From	发出请求的用户的Email	From: user@ruyice.com
Host	指定请求的服务器的域名和端口号	Host: ruyice.com
If-Match	只有请求内容与实体相匹配才有效	If-Match: “737060cd8c284d8af7ad3082f209582d”
If-Modified-Since	如果请求的部分在指定时间之后被修改则请求成功，未被修改则返回304代码	If-Modified-Since: Sat, 11 Oct 2017 19:35:31 GMT
If-None-Match	如果内容未改变返回304代码，参数为服务器先前发送的Etag，与服务器回应的Etag比较判断是否改变	If-None-Match: “737060cd8c284d8af7ad3082f209582d”
If-Range	如果实体未改变，服务器发送客户端丢失的部分，否则发送整个实体。参数也为Etag	If-Range: “737060cd8c284d8af7ad3082f209582d”
If-Unmodified-Since	只在实体在指定时间之后未被修改才请求成功	If-Unmodified-Since: Sat, 12 Oct 2017 18:51:52 GMT
Max-Forwards	限制信息通过代理和网关传送的时间	Max-Forwards: 10
Pragma	用来包含实现特定的指令	Pragma: no-cache
Proxy-Authorization	连接到代理的授权证书	Proxy-Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
Range	只请求实体的一部分，指定范围	Range: bytes=500-999
Referer	先前网页的地址，当前请求网页紧随其后,即来路	Referer: http://ruyice.com/test
TE	客户端愿意接受的传输编码，并通知服务器接受接受尾加头信息	TE: trailers,deflate;q=0.5
Upgrade	向服务器指定某种传输协议以便服务器进行转换（如果支持）	Upgrade: HTTP/2.0, SHTTP/1.3, IRC/6.9, RTA/x11
User-Agent	User-Agent的内容包含发出请求的用户信息	User-Agent: Mozilla/5.0 (Linux; X11)
Via	通知中间网关或代理服务器地址，通信协议	Via: 1.0 fred, 1.1 ruyice.com (Apache/1.1)
Warning	关于消息实体的警告信息	Warn: 199 Miscellaneous warning

常见响应头 | Responses Header | Http Header

Header	解释	示例
Accept-Ranges	表明服务器是否支持指定范围请求及哪种类型的分段请求	Accept-Ranges: bytes
Age	从原始服务器到代理缓存形成的估算时间（以秒计，非负）	Age: 12
Allow	对某网络资源的有效的请求行为，不允许则返回405	Allow: GET, HEAD
Cache-Control	告诉所有的缓存机制是否可以缓存及哪种类型	Cache-Control: no-cache
Content-Encoding	web服务器支持的返回内容压缩编码类型。	Content-Encoding: gzip
Content-Language	响应体的语言	Content-Language: en,zh
Content-Length	响应体的长度	Content-Length: 348
Content-Location	请求资源可替代的备用的另一地址	Content-Location: /index.htm
Content-MD5	返回资源的MD5校验值	Content-MD5: Q2hlY2sgSW50ZWdyaXR5IQ==
Content-Range	在整个返回体中本部分的字节位置	Content-Range: bytes 21010-47021/47022
Content-Type	返回内容的MIME类型	Content-Type: text/html; charset=utf-8
Date	原始服务器消息发出的时间	Date: Tue, 18 Nov 2017 08:12:31 GMT
ETag	请求变量的实体标签的当前值	ETag: “737060cd8c284d8af7ad3082f209582d”
Expires	响应过期的日期和时间	Expires: Thu, 08 Dec 2017 16:00:00 GMT
Last-Modified	请求资源的最后修改时间	Last-Modified: Tue, 10 Nov 2017 12:45:26 GMT
Location	用来重定向接收方到非请求URL的位置来完成请求或标识新的资源	Location: http://ruyice.com/demo_project
Pragma	包括实现特定的指令，它可应用到响应链上的任何接收方	Pragma: no-cache
Proxy-Authenticate	它指出认证方案和可应用到代理的该URL上的参数	Proxy-Authenticate: Basic
refresh	应用于重定向或一个新的资源被创造，在5秒之后重定向（由网景提出，被大部分浏览器支持）	Refresh: 5; url=http://ruyice.com/demo_project
Retry-After	如果实体暂时不可取，通知客户端在指定时间之后再次尝试	Retry-After: 120
Server	web服务器软件名称	Server: Apache/1.3.27 (Unix) (Red-Hat/Linux)
Set-Cookie	设置Http Cookie	Set-Cookie: UserID=JohnDoe; Max-Age=3600; Version=1
Trailer	指出头域在分块传输编码的尾部存在	Trailer: Max-Forwards
Transfer-Encoding	文件传输编码	Transfer-Encoding:chunked
Vary	告诉下游代理是使用缓存响应还是从原始服务器请求	Vary: *
Via	告知代理客户端响应是通过哪里发送的	Via: 1.0 fred, 1.1 ruyice.com (Apache/1.1)
Warning	警告实体可能存在的问题	Warning: 199 Miscellaneous warning
WWW-Authenticate	表明客户端请求实体应该使用的授权方案	WWW-Authenticate: Basic