Question

我正在开发一个 Chrome扩展程序，预先填充字段，然后在我访问时在外部网站上提交表单。

当数据硬编码到我的script.js文件中时，它可以正常工作。但是，我想从我的Intranet主页中的元素中获取用户名。在脚本中使用它而不是硬编码。

我做了一个简单的script.js来测试它的工作原理：

的script.js：

$.get('https://intranet/index.php', function(data){ 
    alert('test');
});

当我尝试在我的Extension中使用它并重新加载页面时，我收到错误：

XMLHttpRequest cannot load https://intranet/index.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'chrome-extension://eecikfibchjhmochelhmhlimbcjglldf' is therefore not allowed access. The response had HTTP status code 401.

当在https://intranet/test.html运行相同的代码时，它可以完美运行。

的test.html：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<script type="text/javascript">
$.get('https://intranet/index.php', function(data){ 
    $(document.body).load('https://intranet/ #username');
});
</script>

的index.php：

<?php
header("Access-Control-Allow-Origin: *");
echo '<div id="username">username</div>';
?>

我读过有人使用JSONP来解决此问题。有没有人有这方面的经验？

有人可以就此问题提供帮助/建议吗？

感谢您提供任何指导。

Answer 1

这里似乎有两个问题。

否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。

看起来你没有彻底搜索解决方案，因为这是一个常见问题。无论如何，有两种方法可以解决这个问题：

在扩展方面。如果您具有主机权限，则无论CORS标头如何，您都可以执行跨源请求。（注意：＆＃34;当在https://intranet/test.html运行相同的代码时，它完美运行＆＃34; 突出显示问题是交叉 -origin但是可以工作同一个网站）。

有关于此的完整扩展文档文章：Cross-Origin XMLHttpRequest，但是超短版本：您需要在清单中添加网站的权限：
```
"permissions": [
  "https://intranet/*"
],
```
在服务器端，添加Access-Control-Allow-Origin: *标头。请注意，此解决方案会打开某个攻击面（不仅您的扩展程序现在可以执行请求），因此最好采用方法1。

那说：你试图实施方法2，但它没有用。为什么？因为还有第二个问题：

响应的HTTP状态代码为401

HTTP 401是＆＃34;未经授权＆＃34;。您的请求缺少必要的授权 - 您在使用Intranet网站时看不到，因为浏览器已经缓存了这些凭据。

但是他们不会被应用于跨源请求，因此您会收到401错误页面而不是目标页面 - 它不包含您的标题。

您需要提供授权以及请求。 jQuery允许：

$.get(
  {
    url: 'https://intranet/index.php',
    username: '...',
    password: '...'
  }, function(data){ 
    alert('test');
  }
);

我认为很明显，这不应该在扩展中进行硬编码。

Chrome扩展程序

1 个答案: