跨域 – 永夜 https://www.shuijingwanwq.com 没有不值得去解决的问题，也没有不值得去学习的技术！ Sun, 31 May 2026 03:47:56 +0000 zh-Hans hourly 1 https://wordpress.org/?v=7.0 在 Yii 2.0 的 RESTful APIs 中，跨域资源共享的实现 https://www.shuijingwanwq.com/2020/06/09/4233/ https://www.shuijingwanwq.com/2020/06/09/4233/#respond Tue, 09 Jun 2020 06:59:49 +0000 https://www.shuijingwanwq.com/?p=4233 浏览量： 125

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

在域名：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


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 请求示例

<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

POST 请求，响应 200，但是无响应数据。

图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 过滤器添加到控制器


    /**
     * {@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

再次 POST 请求，响应 200，浏览器中的控制台成功输出响应数据的 code。

图3

 

再次 POST 请求，响应 200，有响应数据

图4

6、因此，需要编辑器的前端有所调整，调整为与 Ajax 的请求示例一致。Content-Type 的值从：application/json 调整为：application/x-www-form-urlencoded。终于服务端接受到请求数据，且响应 200。响应 200 的请求日志数据。如图5

因此，需要编辑器的前端有所调整，调整为与 Ajax 的请求示例一致。Content-Type 的值从：application/json 调整为：application/x-www-form-urlencoded。终于服务端接受到请求数据，且响应 200。

图5


[
    'url' => '/v1/plan-tasks/274?login_id=2e368664c41b8bf511bcc9c65d86dbc3&amp;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&amp;login_tid=82c3f78c73c01c92b41a90f6b8b88efd',
        'REQUEST_METHOD' => 'POST',
        'CONTENT_TYPE' => 'application/x-www-form-urlencoded',
    ],
]
]]> https://www.shuijingwanwq.com/2020/06/09/4233/feed/ 0 html2canvas 在跨二级域名下的无法截图的解决流程 https://www.shuijingwanwq.com/2017/05/24/1634/ https://www.shuijingwanwq.com/2017/05/24/1634/#respond Wed, 24 May 2017 10:32:05 +0000 http://www.shuijingwanwq.com/?p=1634 浏览量： 64

1、网页界面中的红框中的图片为跨二级域名所调用的图片，如图1

网页界面中的红框中的图片为跨二级域名所调用的图片

图1

2、网页源代码，红框中的图片地址为相对于当前网页地址的二级域名，如图2

网页源代码，红框中的图片地址为相对于当前网页地址的二级域名

图2

3、基于 html2canvas 实现的截图，球队LOGO已经消失，如图3

基于 html2canvas 实现的截图，球队LOGO已经消失

图3

4、访问：http://backend.kaiqiu_shujujiexi_api.dev/team_logo/GZHOU.png ，响应如图4

访问：http://backend.kaiqiu_shujujiexi_api.dev/team_logo/GZHOU.png ，响应

图4

5、由于图片服务器为Nginx，设置允许跨域访问，重启Nginx，如图5

在nginx.conf里找到server项，并在里面添加如下配置：
add_header Access-Control-Allow-Origin *;

由于图片服务器为Nginx，设置允许跨域访问，重启Nginx

图5

6、再次访问：http://backend.kaiqiu_shujujiexi_api.dev/team_logo/GZHOU.png ，响应如图6

再次访问：http://backend.kaiqiu_shujujiexi_api.dev/team_logo/GZHOU.png ，响应

图6

7、js的截图代码中添加2行：allowTaint: true, useCORS: true，如图7

js的截图代码中添加1行：useCORS: true

图7

8、截图成功，html2canvas 在跨二级域名下的无法截图的问题得到解决，如图8

截图成功，html2canvas 在跨二级域名下的无法截图的问题得到解决

图8

9、此种解决方案，即使是跨顶级域名也是支持的，如图9

此种解决方案，即使是跨顶级域名也是支持的

图9

 

]]> https://www.shuijingwanwq.com/2017/05/24/1634/feed/ 0 在ShopNC中将$config[‘wap_site_url’]=’http://mall.m.ygt.cm’;，导致ajax请求跨域的实现（get、post），在请求头中实现Cookie的流程 https://www.shuijingwanwq.com/2015/12/16/871/ https://www.shuijingwanwq.com/2015/12/16/871/#respond Wed, 16 Dec 2015 09:22:45 +0000 http://www.shuijingwanwq.com/?p=871 浏览量： 161

1、$.getJSON的请求代码如图1.0

$.getJSON的请求代码如图1.0

$.getJSON的请求代码如图1.0

2、查看网络，发现响应Cookie中，生成了新的PHPSESSID，如图1.1

查看网络，发现响应Cookie中，生成了新的PHPSESSID，如图1.1

查看网络，发现响应Cookie中，生成了新的PHPSESSID，如图1.1

3、在$.getJSON的请求地址中添加：&callback=?，相当于设置请求格式为jsonp，如图1.2

在$.getJSON的请求地址中添加：&callback=?，相当于设置请求格式为jsonp，如图1.2

在$.getJSON的请求地址中添加：&callback=?，相当于设置请求格式为jsonp，如图1.2

4、查看网络，发现请求Cookie中已经与当前网址保持一致，如图1.3

查看网络，发现请求Cookie中已经与当前网址保持一致，如图1.3

查看网络，发现请求Cookie中已经与当前网址保持一致，如图1.3

5、$.ajax下的post请求，代码如图2.0

$.ajax下的post请求，代码如图2.0

$.ajax下的post请求，代码如图2.0

6、查看网络，发现响应Cookie中，生成了新的PHPSESSID，如图2.1

查看网络，发现响应Cookie中，生成了新的PHPSESSID，如图2.1

查看网络，发现响应Cookie中，生成了新的PHPSESSID，如图2.1

7、js代码实现：dataType:’jsonp’,crossDomain: true,如图2.2

js代码实现：dataType:'jsonp',crossDomain: true,如图2.2

js代码实现：dataType:’jsonp’,crossDomain: true,如图2.2

8、查看网络，发现请求Cookie中已经与当前网址保持一致，但是post请求已经转换为get请求，如图2.3

查看网络，发现请求Cookie中已经与当前网址保持一致，但是post请求已经转换为get请求，如图2.3

查看网络，发现请求Cookie中已经与当前网址保持一致，但是post请求已经转换为get请求，如图2.3

9、js代码实现：dataType:’json’,xhrFields:{withCredentials:true},crossDomain: true,如图2.4

js代码实现：dataType:'json',xhrFields:{withCredentials:true},crossDomain: true,如图2.4

js代码实现：dataType:’json’,xhrFields:{withCredentials:true},crossDomain: true,如图2.4

10、php代码实现：
header(“Access-Control-Allow-Credentials: true”);
header(“Access-Control-Allow-Origin: ” . C(‘wap_site_url’) . “”);

其中C(‘wap_site_url’)的值为：http://mall.m.ygt.cm ，如图2.5

php代码实现： header("Access-Control-Allow-Credentials: true"); header("Access-Control-Allow-Origin: " . C('wap_site_url') . ""); 其中C('wap_site_url')的值为：http://mall.m.ygt.cm ，如图2.5

php代码实现：
header(“Access-Control-Allow-Credentials: true”);
header(“Access-Control-Allow-Origin: ” . C(‘wap_site_url’) . “”);
其中C(‘wap_site_url’)的值为：http://mall.m.ygt.cm ，如图2.5

11、查看网络，发现请求Cookie中已经与当前网址保持一致，如图2.6

查看网络，发现请求Cookie中已经与当前网址保持一致，如图2.6

查看网络，发现请求Cookie中已经与当前网址保持一致，如图2.6

12、js中document.cookie的代码实现：domain=.ygt.cm; 如图2.7

js中document.cookie的代码实现：domain=.ygt.cm; 如图2.7

js中document.cookie的代码实现：domain=.ygt.cm; 如图2.7

13、$.ajax下的post请求，代码如图3.0，格式为jsonp；其实也可以采用与$.ajax下的post请求一致的处理方案，采用格式json，再设置xhrFields

]]> https://www.shuijingwanwq.com/2015/12/16/871/feed/ 0