Menu
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>`;
}
950
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
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
