我正在开发一个Chrome扩展,预填充字段,然后在外部网站上提交表单,当我访问它。
当数据硬编码到我的script.js
文件时,它可以完美地工作。但是,我想从我的内部网主页&在脚本中使用它,而不是硬编码。
我做了一个简单的script.js
来测试这个工作:
script.js:
$.get('https://intranet/index.php', function(data){
alert('test');
});
当我尝试在我的扩展中使用这个并重新加载页面时,我得到错误:
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
来解决这个问题。有人有过这样的经历吗?
感谢您的指导。
这里似乎同时存在两个问题。
请求的资源上没有'Access-Control-Allow-Origin'标头。
看起来不像你彻底搜索了解决方案,因为这是一个常见的问题。总之,有两种方法可以解决这个问题:
-
在扩展端。如果您有主机权限,则可以执行跨域请求,而不管CORS标头是什么。(注意:"当相同的代码在https://intranet/test.html上运行时,它可以完美地工作"强调问题是交叉-origin,但在同一站点上工作)。
关于这个有一篇完整的扩展文档文章:跨域XMLHttpRequest,但是一个超短的版本:你需要在manifest中添加站点的权限:
"permissions": [ "https://intranet/*" ],
-
在服务器端,通过添加
Access-Control-Allow-Origin: *
头。请注意,这种解决方案打开了一个特定的攻击面(现在不仅您的扩展可以执行请求),所以方法1是可取的。
也就是说:你试图实现方法2,但它不起作用。为什么?因为还有第二个问题:
响应的HTTP状态码为401
HTTP 401是"未经授权"。您的请求缺乏必要的授权-当您使用内部网站点本身时,您不会看到这一点,因为浏览器已经缓存了这些凭据。
但是它们不会应用于跨域请求,所以你得到一个401错误页面而不是预期的页面-不包含你的头。
您需要在请求的同时提供授权。jQuery允许:
$.get(
{
url: 'https://intranet/index.php',
username: '...',
password: '...'
}, function(data){
alert('test');
}
);
我认为这应该是显而易见的,不应该硬编码在扩展