Said in front

There are no fewer than 7 or 8 ways to solve cross-domain, similar articles I have also published, but the development of the road will always encounter some strange restrictions, so that you can not always easy debugging, this time I simply wrote a vscode extension, along with the development tools to eliminate access-control-allow-origin

A, download

Vscode extended app Store search for “cORS” to download

Two, how to use

1, open

A new icon will appear in the lower right corner, and you can tap it to open the built-in service

2.1 ajax syndication (GET example — LOfter)

Try borrowing lofter’s API

$.ajax({
  type: "get".url: "http://www.lofter.com/trade/reward/isOpen".success: function(res) {
    console.log(res); }});Copy the code

The current request will report a cross-domain error, converting the above to

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); }});Copy the code

Return to success

2.2 ajax Syndication (POST Example — Digging gold)

Try borrowing juejin’s 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); }});Copy the code

The current request will report a cross-domain error, converting the above to

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); }});Copy the code

Return to success

3, shut down

Three, API

Because of the simplicity of the design, there are currently only three API configurations

  1. Key (pointing to the server address from the current CORS)
  2. Proxy (pointing to the destination address of the request)
  3. Other (Other related configuration items)

Regarding other, the requestHeaders changes are currently available to developers

var VSCODE_CORS_URL = {
  key: "http://localhost:XX".proxy: "https://XX".other: {
    requestHeaders: {
      "X-Agent": "XX".Cookie: "XX"
      // more}}};Copy the code

The internal extension defaults to AXIOS. The above requestHeaders will be processed by the following source code, if the same can be overwritten

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 }Copy the code

Four, self-test situation

Type

  • The Get tick
  • Post + application/json)
  • Post + application/x – WWW – form – urlencoded)

Lib

  • JQ)
  • Axios)

about

Make: o sof f OVE▅▅▅▆ tune Tune Sky

blog：blog.csdn.net/mcky_love

The Denver nuggets: juejin. Cn/user / 199636…

lofter：zcxy-gs.lofter.com/

Sf:segmentfault.com/u/mybestang…

Git:github.com/gs3170981/v…

conclusion

If there are bugs/comments, please mention Issues, such as use please star~