在 Yii 2.0 的 RESTful APIs 中,跨域资源共享的实现
1、在域名:http://editorweb.wjdev.chinamcloud.cn 中请求接口:http://api.pcs.wjdev.chinamcloud.cn/v1/plan-tasks/274?login_id=2e368664c41b8bf511bcc9c65d86dbc3&login_tid=b26398238620e8cd15b0155cd7aee9b2 ,响应 404 ,所请求的资源上不存在“ Access-Control-Allow-Origin”标头。如图1
1 | OPTIONS http://api.pcs.wjdev.chinamcloud.cn/v1/plan-tasks/274?login_id=2e368664c41b8bf511bcc9c65d86dbc3&login_tid=b26398238620e8cd15b0155cd7aee9b2 404 (Not Found) Access to fetch at 'http://api.pcs.wjdev.chinamcloud.cn/v1/plan-tasks/274?login_id=2e368664c41b8bf511bcc9c65d86dbc3&login_tid=b26398238620e8cd15b0155cd7aee9b2' from origin 'http://editorweb.wjdev.chinamcloud.cn' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. |
2、决定先在本地环境中自行实现一个前端的 Ajax 请求示例
1 | <img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve= "%3Cscript%3E%0A%20%20%20%20%24.post(%22http%3A%2F%2Fapi.pcs-api.localhost%2Fv1%2Fplan-tasks%2F88%3Flogin_id%3D2e368664c41b8bf511bcc9c65d86dbc3%26login_tid%3Db26398238620e8cd15b0155cd7aee9b2%22%2C%20%7B%7D%2C%0A%20%20%20%20%20%20%20%20function(data)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log(data.code)%3B%0A%20%20%20%20%20%20%20%20%7D%2C%20%22json%22)%3B%0A%3C%2Fscript%3E" data-mce-resize= "false" data-mce-placeholder= "1" class = "mce-object" width= "20" height= "20" alt= "<script>" title= "<script>" /> |
3、POST 请求,响应 200,但是无响应数据。如图2
1 2 | Access to XMLHttpRequest at 'http://api.pcs-api.localhost/v1/plan-tasks/88?login_id=2e368664c41b8bf511bcc9c65d86dbc3&login_tid=b26398238620e8cd15b0155cd7aee9b2' from origin 'http://www.pcs-api.localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. jquery.js:9837 Cross-Origin Read Blocking (CORB) blocked cross-origin response http://api.pcs-api.localhost/v1/plan-tasks/88?login_id=2e368664c41b8bf511bcc9c65d86dbc3&login_tid=b26398238620e8cd15b0155cd7aee9b2 with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details. |
4、参考跨域资源共享 CORS 机制:https://www.yiiframework.com/doc/guide/2.0/zh-cn/structure-filters#cors ,将 Cross-Origin Resource Sharing 过滤器添加到控制器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /** * {@inheritdoc} */ public function behaviors() { $behaviors = parent::behaviors(); // remove authentication filter $auth = $behaviors [ 'authenticator' ]; unset( $behaviors [ 'authenticator' ]); // add CORS filter $behaviors [ 'corsFilter' ] = [ 'class' => Cors::className(), ]; // re-add authentication filter $behaviors [ 'authenticator' ] = $auth ; // avoid authentication on CORS-pre-flight requests (HTTP OPTIONS method) $behaviors [ 'authenticator' ][ 'except' ] = [ 'options' ]; return $behaviors ; } |
5、再次 POST 请求,响应 200,浏览器中的控制台成功输出响应数据的 code。如图3、图4
6、因此,需要编辑器的前端有所调整,调整为与 Ajax 的请求示例一致。Content-Type 的值从:application/json 调整为:application/x-www-form-urlencoded。终于服务端接受到请求数据,且响应 200。响应 200 的请求日志数据。如图5
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | [ 'url' => '/v1/plan-tasks/274?login_id=2e368664c41b8bf511bcc9c65d86dbc3&login_tid=82c3f78c73c01c92b41a90f6b8b88efd', 'request_query_params' => [ 'id' => '274', 'login_id' => '2e368664c41b8bf511bcc9c65d86dbc3', 'login_tid' => '82c3f78c73c01c92b41a90f6b8b88efd', ], 'request_body_params' => [ '{"id":274,"queryParam":"eyJ0YXNrSWQiOjI3NCwiY2FsbGJhY2tGbGFnIjoiWSIsImNhbGxiYWNrVXJsIjoiaHR0cDovL2FwaS5wY3Mud2pkZXYuY2hpbmFtY2xvdWQuY24vdjEvcGxhbi10YXNrLXJlc291cmNlcy9jYWxsYmFjaz9sb2dpbl9pZD0yZTM2ODY2NGM0MWI4YmY1MTFiY2M5YzY1ZDg2ZGJjMyZsb2dpbl90aWQ9ODJjM2Y3OGM3M2MwMWM5MmI0MWE5MGY2YjhiODhlZmQiLCJlZGl0b3JfdHlwZSI6IjIiLCJlZGl0b3JfdGl0bGUiOiLmkrDlhpnkvpvnqL8tMjAyMDA1MjgtMiIsImVkaXRvcl9pZCI6Mjc0LCJlZGl0b3JfY2FsbGJhY2tfdXJsIjoiaHR0cDovL2FwaS5wY3Mud2pkZXYuY2hpbmFtY2xvdWQuY24vdjEvcGxhbi10YXNrcy8yNzQ/bG9naW5faWQ9MmUzNjg2NjRjNDFiOGJmNTExYmNjOWM2NWQ4NmRiYzMmbG9naW5fdGlkPTgyYzNmNzhjNzNjMDFjOTJiNDFhOTBmNmI4Yjg4ZWZkIiwiZGF0YSI6eyJzb3VyY2UiOiJjaGluYW1jbG91ZF9zY21zIiwiY3VycmVudF9zdGVwX2NvZGUiOiJ3cml0ZV9mZWVkIiwib2JqZWN0X3R5cGUiOiJmZWVkIiwiYXJ0aWNsZV90eXBlX2lkIjoxfX0' => '"}', ], 'user_id' => '3', '$_SERVER' => [ 'HTTP_ACCEPT_LANGUAGE' => 'zh-CN,zh;q=0.9', 'HTTP_ACCEPT' => 'application/json,text/plain, */*', 'HTTP_HOST' => 'api.pcs.wjdev.chinamcloud.cn', 'REMOTE_ADDR' => '10.42.22.22', 'REQUEST_URI' => '/v1/plan-tasks/274?login_id=2e368664c41b8bf511bcc9c65d86dbc3&login_tid=82c3f78c73c01c92b41a90f6b8b88efd', 'REQUEST_METHOD' => 'POST', 'CONTENT_TYPE' => 'application/x-www-form-urlencoded', ], ] |
近期评论