预检请求实现
<p>平安云API网关默认不支持跨域访问CORS功能,如要需要支持跨域访问CORS,请先在<a href="https://pinganyun.com/console/apiGateway" target="_blank">API网关管理控制台</a>开启CORS并重新发布API,同时按照<a href="https://pinganyun.com/ssr/help/middleware/APIGateway/Common_Reference.CORS.Principle" target="_blank">预检请求原理</a>的描述创建预检API。</p>
<p>1. 浏览器发送携带Origin的API请求:</p>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="background-color:#f7f8fa">
<p><span style="font-family:Consolas">OPTIONS / HTTP/1.1</span></p>
<p><span style="font-family:Consolas">User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.170 Safari/537.36</span></p>
<p><span style="font-family:Consolas">Host: pinganyun.com</span></p>
<p><span style="font-family:Consolas">Accept: */*</span></p>
<p><span style="font-family:Consolas">Origin: http://www.Server-test.com</span></p>
<p><span style="font-family:Consolas">Access-Control-Request-Method: PUT</span></p>
<p><span style="font-family:Consolas">Access-Control-Request-Headers: PA-AG-AppId, PA-AG-Timestamp</span></p>
</td>
</tr>
</tbody>
</table>
<p>• Origin:请求的来源。</p>
<p>• Access-Control-Request-Method:浏览器实际的请求方法。</p>
<p>• Access-Control-Request-Headers:实际请求中额外携带的请求头信息。</p>
<p>2. 后端服务器是否允许发送跨域请求的响应信息:</p>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="background-color:#f7f8fa">
<p><span style="font-family:Consolas">HTTP/1.1 200 OK</span></p>
<p><span style="font-family:Consolas">Date: Tue, 21 Jan 2019 21:15:13 GMT</span></p>
<p><span style="font-family:Consolas">Content-Type: application/json</span></p>
<p><span style="font-family:Consolas">Access-Control-Allow-Origin: http://www.Server-test.com</span></p>
<p><span style="font-family:Consolas">Access-Control-Allow-Headers: PUT</span></p>
<p><span style="font-family:Consolas">Access-Control-Allow-Methods: PA-AG-AppId, PA-AG-Timestamp</span></p>
</td>
</tr>
</tbody>
</table>
<p>• Access-Control-Allow-Origin:允许跨域访问的源。取值为*,表示后端服务器接受任意域的请求。</p>
<p>• Access-Control-Allow-Methods:允许浏览器使用的请求方法。</p>
<p>• Access-Control-Allow-Headers:允许浏览器在请求中携带的请求头。</p>
<p>3. API网关是否允许发送跨域请求的响应信息:</p>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="background-color:#f7f8fa">
<p><span style="font-family:Consolas">HTTP/1.1 200 OK</span></p>
<p><span style="font-family:Consolas">Date: Tue, 21 Jan 2019 21:15:13 GMT</span></p>
<p><span style="font-family:Consolas">Content-Type: application/json</span></p>
<p><span style="font-family:Consolas">Access-Control-Allow-Origin: http://www.Server-test.com</span></p>
<p><span style="font-family:Consolas">Access-Control-Allow-Headers: PUT</span></p>
<p><span style="font-family:Consolas">Access-Control-Allow-Methods: PA-AG-AppId, PA-AG-Timestamp</span></p>
<p><span style="font-family:Consolas">Vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers</span></p>
<p><span style="font-family:Consolas">Access-Control-Allow-Origin: http://www.Server-test.com</span></p>
<p><span style="font-family:Consolas">Access-Control-Max-Age: 1800</span></p>
</td>
</tr>
</tbody>
</table>
<p>• Access-Control-Allow-Origin:允许跨域访问的源。取值为*,表示后端服务器接受任意域的请求。</p>
<p>• Access-Control-Allow-Methods:允许浏览器使用的请求方法。</p>
<p>• Access-Control-Allow-Headers:允许浏览器在请求中携带的请求头。</p>
<p>• Access-Control-Max-Age:预检响应的有效时间,单位:秒。在有效期内,浏览器无需再次发送预检请求。</p>
<p><!--[if gte mso 9]><xml>
<o:OLEObject Type="Embed" ProgID="PBrush" ShapeID="_x0000_i1025"
DrawAspect="Content" ObjectID="_1634025726">
</o:OLEObject>
</xml><![endif]--> <img src="https://pcp-portal-sca.obs-cn-shenzhen.pinganyun.com/pcp-portal-sca/20193110110322-168dbed595ee.png" style="height:26px; margin:0px; width:65px" />:如果后端服务器返回的结果中没有以上4个字段,或仅包含其中的几个字段,API网关会补齐剩余字段后返回给浏览器。</p>
<p>4. 浏览器发送携带Origin的API请求:</p>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="background-color:#f7f8fa">
<p><span style="font-family:Consolas">PUT /putUser HTTP/1.1</span></p>
<p><span style="font-family:Consolas">Host: pinganyun.com</span></p>
<p><span style="font-family:Consolas">Orgin: http://www.Server-test.com</span></p>
<p><span style="font-family:Consolas">Content-type: application/x-www-form-urlencoded; charset=utf-8</span></p>
<p><span style="font-family:Consolas">Accept: application/json; charset=utf-8</span></p>
<p><span style="font-family:Consolas">Date: Tue, 21 Jan 2019 21:15:13 GMT</span></p>
</td>
</tr>
</tbody>
</table>
<p>5. 后端服务器返回的响应信息:</p>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="background-color:#f7f8fa">
<p><span style="font-family:Consolas">HTTP/1.1 200 OK</span></p>
<p><span style="font-family:Consolas">Date: Tue, 21 Jan 2019 21:15:13 GMT</span></p>
<p><span style="font-family:Consolas">Content-Type: application/json</span></p>
<p><span style="font-family:Consolas">Content-Length: 25</span></p>
<p><span style="font-family:Consolas">Access-Control-Allow-Origin: http://www.Server-test.com</span></p>
<p> </p>
<p><span style="font-family:Consolas">{"ret":"0", "msg":"succ"}</span></p>
</td>
</tr>
</tbody>
</table>
<p>6. API网关发送给浏览器的响应信息:</p>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="background-color:#f7f8fa">
<p><span style="font-family:Consolas">HTTP/1.1 200 OK</span></p>
<p><span style="font-family:Consolas">Date: Tue, 21 Jan 2019 21:15:13 GMT</span></p>
<p><span style="font-family:Consolas">Content-Type: application/json</span></p>
<p><span style="font-family:Consolas">Access-Control-Allow-Origin: http://www.Server-test.com</span></p>
<p><span style="font-family:Consolas">Access-Control-Allow-Headers: PUT</span></p>
<p><span style="font-family:Consolas">Access-Control-Allow-Methods: PA-AG-AppId, PA-AG-Timestamp</span></p>
<p><span style="font-family:Consolas">Vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers</span></p>
<p><span style="font-family:Consolas">Access-Control-Allow-Origin: http://www.Server-test.com</span></p>
<p><span style="font-family:Consolas">Access-Control-Max-Age: 1800</span></p>
<p><span style="font-family:Consolas">Content-Length: 25</span></p>
<p> </p>
<p><span style="font-family:Consolas">{"ret":"0", "msg":"succ"}</span></p>
</td>
</tr>
</tbody>
</table>
提交成功!非常感谢您的反馈,我们会继续努力做到更好!