解析"No 'Access-Control-Allow-Origin'页眉存在"Ch

Resolve "No 'Access-Control-Allow-Origin' header is present" issue with Chrome Extension

本文关键字：quot 存在 Ch Access-Control-Allow-Origin No 解析      更新时间：2023-09-26

我正在开发一个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'标头。

看起来不像你彻底搜索了解决方案，因为这是一个常见的问题。总之，有两种方法可以解决这个问题:

  1. 在扩展端。如果您有主机权限，则可以执行跨域请求，而不管CORS标头是什么。(注意:"当相同的代码在https://intranet/test.html上运行时，它可以完美地工作"强调问题是交叉-origin，但在同一站点上工作)。

    关于这个有一篇完整的扩展文档文章:跨域XMLHttpRequest，但是一个超短的版本:你需要在manifest中添加站点的权限:

    "permissions": [
  "https://intranet/*"
],

  2. 在服务器端，通过添加Access-Control-Allow-Origin: *头。请注意，这种解决方案打开了一个特定的攻击面(现在不仅您的扩展可以执行请求)，所以方法1是可取的。

也就是说:你试图实现方法2，但它不起作用。为什么?因为还有第二个问题:

响应的HTTP状态码为401

HTTP 401是"未经授权"。您的请求缺乏必要的授权-当您使用内部网站点本身时，您不会看到这一点，因为浏览器已经缓存了这些凭据。

但是它们不会应用于跨域请求，所以你得到一个401错误页面而不是预期的页面-不包含你的头。

您需要在请求的同时提供授权。jQuery允许:

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

我认为这应该是显而易见的，不应该硬编码在扩展

相关文章：