解決「Chrome」擴展程序存在「否」Access-Control-Allow-Origin'頭部存在'問題'

我正在開發Chrome擴展程序預先填充字段，然後在我訪問它時在外部網站上提交表單。解決「Chrome」擴展程序存在「否」Access-Control-Allow-Origin'頭部存在'問題'

當數據被硬編碼到我的script.js文件中時，它可以很好地工作。但是，我想從我的Intranet主頁&中的某個元素中獲取用戶名，而不是對其進行硬編碼。

我做了一個簡單的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來解決這個問題。有沒有人有這方面的經驗？

任何人都可以提供有關此問題的幫助/建議嗎？

感謝您的任何指導。

來源

2016-09-14 Michael McGarrity

」該響應具有HTTP狀態碼401。「表示這是獲取資源時的身份驗證問題，所以標題不會出現，因爲一旦腳本處理完畢，它將被髮送，而Web服務器不允許該腳本。 – jedifans

這裏似乎有兩個問題一次。

No 'Access-Control-Allow-Origin' header is present on the requested resource.

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

在擴展端。如果您擁有主機權限，則無論CORS標頭如何，都可以執行跨域請求。（注意：「當這個相同的代碼運行在https://intranet/test.html它完美的作品」強調問題是交叉 -origin但在同一網站上工作）。

有這個整體擴展的文檔文章：Cross-Origin XMLHttpRequest，但超短版：你需要添加權限的網站清單：
```
"permissions": [ 
    "https://intranet/*" 
], 
```
在服務器端，通過添加Access-Control-Allow-Origin: *標題。請注意，此解決方案打開特定的攻擊面（不僅您的擴展可以現在請求），所以方法1更可取。

這就是說：你試圖實施方法2，它沒有奏效。爲什麼？因爲存在第二個問題：

The response had HTTP status code 401

HTTP 401是「未經授權」。您的請求缺少必要的授權 - 您在使用Intranet站點時看不到自己的內容，因爲瀏覽器已經緩存了這些憑證。

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

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

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

我認爲這應該是顯而易見的，這不應該在擴展中硬編碼。「

來源

2016-09-14 08:57:11 Xan

首先 - **非常感謝**這樣的_detailed_響應:) 我已經添加了'permissions'部分並且還更新了'script.js'以包含您的jQuery示例。該代碼在本地使用/不使用用戶名和密碼工作，但**在擴展**中失敗，並顯示以下錯誤消息：'jquery-2.0.3.js：7845 GET https://www.third-party-url.here/ [對象％20Object] 403（禁止）'。我的jQuery中的這一行指的是'xhr.send（options.hasContent && options.data || null）;'。 –

那麼，你又錯過了一些必要的授權，很可能是 - 它是一個cookie，請求中的API密鑰或類似的東西。這超出了問題的範圍，並且取決於所涉及的第三方。 – Xan

@Xan你好。我已經在'manifest.json'中設置了權限，但我面臨着同樣的錯誤。 api中不需要授權。一個樣本API網址：http://loklak.org/api/search.json?q=from%3Anoone。你能分享一下你對這個問題的看法嗎？ –

解決「Chrome」擴展程序存在「否」Access-Control-Allow-Origin'頭部存在'問題'

回答

相關問題