CODEWITHSUNDEEP
visual-studio-codecorsvscode-extensions
rndev
rndev

Reputation: 792

VSCode cross-origin request inside WebView

I'm working on extension which based on VSCode WebView. Extension make integration with issue tracking system over HTTP API, like Jira. I want to render information about issue in WebView and create some forms for making comments and changing issue status. I don't want to use message passing between extension and WebView. When I try to create HTTP request to API inside WebView I got error:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Server does't support Access-Control-Allow-Origin for "null" or "localhost" Origin.

Is the way to create HTTP request from WebView to server ignoring missing Access-Control-Allow-Origin header? Maybe I can setup some policy for WebView panel? Or create localhost proxy inside extension and make request over proxy?

Code example

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    vscode.commands.registerCommand('catCoding.start', () => {
      // Create and show panel
      const panel = vscode.window.createWebviewPanel(
        'catCoding',
        'Cat Coding',
        vscode.ViewColumn.One,
        {enableScripts: true}
      );

      // And set its HTML content
      panel.webview.html = getWebviewContent();
    })
}

function getWebviewContent() {
  return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cat Coding</title>
</head>
<body>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://google.com', true);
        xhr.send();
    </script>
</body>
</html>`;
}

Upvotes: 7

Views: 4543

Answers (2)

James Gentes
James Gentes

Reputation: 8096

Support for Cross Origin Isolation was just added for Webview through the use of the vscode-coi url parameter; see https://github.com/microsoft/vscode/issues/137884

Upvotes: 2

rndev
rndev

Reputation: 792

Answer from Github Issue

There is no vscode support for changing this. You should think of the webview more as an html view (one that does not have any server or origin) rather than a webpage

Posters on stackoverflow may have suggestions for workarounds

Upvotes: 3

Related Questions