作为一个前端开发者，我们经常需要和各种各样的接口打交道，很多时候我们的开发环境的域和接口所在的域是不同的，比如我们本地开发环境运行域是localhost，但接口所在的域是www.xx.com，这个时候如果我们代码中出现异步请求www.xx.com域API的情况，就会出现跨域问题。

一般情况下，我们会请后端大佬帮我们加上跨域策略，通过设置响应头Access-Control-Allow-Origin来解决跨域问题，但是有时候我们最终的代码可能也会发布到和API的同域的环境上去，如果每个接口都需要请后端加上跨域策略也不太现实，还可能附带产生一些安全隐患，这个时候我们就可以祭出神器浏览器插件了，我们在介绍插件基础知识的时候有提到插件可以拦截请求并更改其中的一些参数，其实要解决跨域问题，我们只需要在请求得到响应之前，修改响应头，添加Access-Control-Allow-Origin头信息，就可以实现跨域访问了。

我们继续看如何编写这个插件，在开始之前我们还是给我们的插件取一下比较优雅的名字“跨域调试助手”，由于插件需要修改响应头，所以我们需要在manifest.json文件中申请webRequest, webRequestBlocking这两个权限，另外content_scripts定义的是注入到页面的资源，如果我们需要拦截请求，就需要在背景页中完成，下面我们看一下插件的具体实现。

首先插件的目录结构：

manifest.json文件的代码如下：

 1 {
 2     "name" : "跨域访问助手",
 3     "version" : "1.0",
 4     "description" : "允许跨域访问",
 5     "manifest_version" : 2,
 6     "icons": {
 7         "16": "images/ico-48.png",
 8         "48": "images/ico-48.png",
 9         "128": "images/ico-48.png"
10     },
11     "browser_action": {
12         "default_title": "跨域访问助手"
13     },
14     "permissions" : ["webRequestBlocking", "webRequest", "*://*/*"],
15     "background" : {
16         "scripts" : ["js/background.js"]
17     }
18 }

background.js文件的代码如下：

 1 var modifyFieldName = 'Access-Control-Allow-Origin';
 2  
 3 chrome.webRequest.onHeadersReceived.addListener(function(details) {
 4   var responseHeaders = details.responseHeaders;
 5   var allowOriginHeader = responseHeaders.find(function(rh, index){
 6     if (rh.name === modifyFieldName) {
 7     responseHeaders[index]['value'] = '*';
 8     return true;
 9     }
10   });
11   if (!allowOriginHeader) {
12     responseHeaders.push({
13       name: modifyFieldName,
14       value: '*'
15     });
16   }
17   return {
18     responseHeaders: responseHeaders
19   };
20 },
21 {
22 urls : ["<all_urls>"]
23 },
24 ["responseHeaders", "blocking"]);

其中对于chrome.webRequest模块，如果有不清楚的可以点击这里查阅。

好了，一个简单却实用的跨域插件就完成了，自从有了这跨域插件妈妈再也不用担心我跨域调试了！！！

 

版权声明：本文为weijiutao原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/weijiutao/p/11676159.html