浏览器家园·资讯

展开

【插件】cors:vscode cors 扩展 – 解决跨域开发最终版

编辑:浏览器知识

说在前头

解决跨域的方式不下 7 8 种,类似的文章我也发表过,但开发路上总会遇到一些奇奇怪怪的限制,让你始终没法 easy 调试,这次我干脆写了个 vscode 扩展,伴随开发工具一起完灭Access-Control-Allow-Origin


一、下载

download

vscode 扩展应用商店搜索“cors”下载即可


二、如何使用

1、开启

ui

右下角会显示新的 icon,点击他即可开启内置服务

icon
start
listening

至此开启了本地端口 1337 的监听

2.1、ajax 联调(get 示例 —— lofter)

借用 lofter 的 API 尝试

$.ajax({
  type: "get",
  url: "http://www.lofter.com/trade/reward/isOpen",
  success: function(res) {
    console.log(res);
  }
});
复制代码

当前请求会报跨域错误,将以上转换为

var VSCODE_CORS_URL = {
  key: "http://localhost:1337",
  proxy: "http://www.lofter.com"
};
$.ajax({
  type: "get",
  url:
    "http://localhost:1337/trade/reward/isOpen?VSCODE_CORS=" +
    JSON.stringify(VSCODE_CORS_URL),
  success: function(res) {
    console.log(res);
  }
});
复制代码
ok

返回成功

2.2、ajax 联调(post 示例 —— 掘金)

借用 juejin 的 API 尝试

$.ajax({
  type: "post",
  url: "https://web-api.juejin.im",
  contentType: "application/json;charset=UTF-8",
  data: JSON.stringify({
    operationName: "",
    query: "",
    variables: {
      limit: 10,
      excluded: []
    },
    extensions: {
      query: {
        id: "5a924f4574e04d67b2ae5df189e8423d"
      }
    }
  }),
  success: function(res) {
    console.log(res);
  }
});
复制代码

当前请求会报跨域错误,将以上转换为

var VSCODE_CORS_URL = {
  key: "http://localhost:1337",
  proxy: "https://web-api.juejin.im",
  other: {
    requestHeaders: {
      "X-Agent": "Juejin/Web"
    }
  }
};
$.ajax({
  type: "post",
  url:
    "http://localhost:1337/query?VSCODE_CORS=" +
    JSON.stringify(VSCODE_CORS_URL),
  contentType: "application/json;charset=UTF-8",
  data: JSON.stringify({
    operationName: "",
    query: "",
    variables: {
      limit: 10,
      excluded: []
    },
    extensions: {
      query: {
        id: "5a924f4574e04d67b2ae5df189e8423d"
      }
    }
  }),
  success: function(res) {
    console.log(res);
  }
});
复制代码
ok2

返回成功

3、关闭

close

三、API

因为设计的非常简单,所以目前 API 配置仅有3 个

  1. key(指向当前 cors 起的服务器地址)
  2. proxy(指向请求的目标地址)
  3. other(其他相关配置项)

关于 other,目前给开发者提供了 requestHeaders 的变更

var VSCODE_CORS_URL = {
  key: "http://localhost:XX",
  proxy: "https://XX",
  other: {
    requestHeaders: {
      "X-Agent": "XX",
      Cookie: "XX"
      // more
    }
  }
};
复制代码

扩展内部默认为 axios,以上 requestHeaders 会被以下源码处理,如有相同可被覆盖

headers: {
  'Accept': '*/*',
  'Accept-Encoding': 'utf-8',
  'Accept-Language': 'zh-CN,zh;q=0.8',
  'Host': Host,
  'Origin': Host,
  'Referer': 'http://' + Host,
  'Connection': 'keep-alive',
  'Cookie': "",
  ...requestHeaders
}
复制代码

四、自测情况

Type

  • Get √
  • Post + application/json √
  • Post + application/x-www-form-urlencoded √

Lib

  • JQ √
  • axios √

关于

make:o︻そ ╆OVE▅▅▅▆▇◤(清一色天空)

blog:blog.csdn.net/mcky_love

掘金:juejin.im/user/59fbe6…

lofter:zcxy-gs.lofter.com/

sf:segmentfault.com/u/mybestang…

git:github.com/gs3170981/v…


结束语

如有 bug/意见,望提 Issues,如好用请 star~

文章TAG:插件  解决  开发  【插件】cors:vscode  cors  扩展  –  解决跨域开发最终版  

加载全部内容

相关教程
猜你喜欢
大家都在看