解決 Chrome 擴展程序的“不存在‘Access-Control-Allow-Origin’標頭”問題

Question

我正在開發一個預填充字段的Chrome 擴展，然后在我訪問它時在外部網站上提交表單。

當數據被硬編碼到我的script.js文件中時，它工作得很好。 但是，我想從我的 Intranet 主頁中的一個元素中獲取用戶名並在腳本中使用它而不是對其進行硬編碼。

我做了一個簡單的script.js來測試這個工作：

腳本.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 上運行時，它工作得很好。

測試.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>

索引.php：

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

我讀到有些人使用JSONP來解決這個問題。 有沒有人有這方面的經驗？

任何人都可以就這個問題提供幫助/建議嗎？

感謝您的任何指導。

Answer 1

這里似乎有兩個問題。

請求的資源上不存在“Access-Control-Allow-Origin”標頭。

看起來您沒有徹底搜索解決方案，因為這是一個常見問題。 無論如何，有兩種方法可以解決這個問題：

在擴展端。 如果您有主機權限，則可以執行跨域請求，而不管 CORS 標頭如何。 （注意： “當相同的代碼在https://intranet/test.html 上運行時，它可以完美運行”突出顯示問題是跨域但在同一站點上運行）。
有一篇關於此的完整擴展文檔文章： Cross-Origin XMLHttpRequest ，但是一個超短版本：您需要在清單中為站點添加權限：
```
 "permissions": [ "https://intranet/*" ],
```
在服務器端，通過添加Access-Control-Allow-Origin: *標頭。 請注意，此解決方案會打開特定的攻擊面（不僅您的擴展現在可以執行請求），因此方法 1 更可取。

也就是說：您嘗試實施方法 2，但沒有奏效。 為什么？ 因為還有第二個問題：

響應的 HTTP 狀態代碼為 401

HTTP 401 是“未經授權”。 您的請求缺乏必要的授權 - 您在使用 Intranet 站點時看不到這些授權，因為瀏覽器已經緩存了這些憑據。

但是它們不會應用於跨域請求，因此您會得到 401 錯誤頁面而不是預期頁面 - 不包含您的標題。

您需要隨請求一起提供授權。 jQuery 允許：

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

我認為很明顯，這不應該在擴展中進行硬編碼。

解決 Chrome 擴展程序的“不存在‘Access-Control-Allow-Origin’標頭”問題

問題描述

1 個解決方案

解決方案1
2 已采納 2016-09-14 08:57:11

解決 Chrome 擴展程序的“不存在‘Access-Control-Allow-Origin’標頭”問題

問題描述

1 個解決方案

解決方案1 2 已采納 2016-09-14 08:57:11

解決方案1
2 已采納 2016-09-14 08:57:11