javascript - with - no access control allow origin header is present on the requested resource ajax
跨源讀取阻塞(CORB) (10)
我使用Jquery AJAX調用了第三方API。 我在控制台中收到以下錯誤:
跨源讀取阻止(CORB)阻止了具有MIME類型application / json的跨源響應 MY URL 。 有關詳細信息,請參閱 https://www.chromestatus.com/feature/5629709824032768 。
我使用以下代碼進行Ajax調用:
$.ajax({
type: 'GET',
url: My Url,
contentType: 'application/json',
dataType:'jsonp',
responseType:'application/json',
xhrFields: {
withCredentials: false
},
headers: {
'Access-Control-Allow-Credentials' : true,
'Access-Control-Allow-Origin':'*',
'Access-Control-Allow-Methods':'GET',
'Access-Control-Allow-Headers':'application/json',
},
success: function(data) {
console.log(data);
},
error: function(error) {
console.log("FAIL....=================");
}
});
當我在Fiddler中檢查時,我得到的數據是響應但不是Ajax成功方法。
請幫幫我。
在大多數情況下,阻止的響應不應該影響網頁的行為,並且可以安全地忽略CORB錯誤消息。 例如,當被阻止的響應的主體已經為空,或者響應將被傳遞到無法處理它的上下文時(例如,諸如404錯誤頁面的HTML文檔),可能發生警告。被送到標籤)。
https://www.chromium.org/Home/chromium-security/corb-for-developers
我不得不清理瀏覽器的緩存,我正在閱讀此鏈接,如果請求獲得空響應,我們會收到此警告錯誤。
我的請求得到了一些CORS,所以這個請求的響應都是空的,我所要做的只是清除瀏覽器的緩存,而CORS卻離開了。
我收到CORS是因為chrome已經在緩存中保存了PORT編號,服務器只接受
localhost:3010
而我正在使用
localhost:3002
,因為緩存。
dataType:'jsonp',
您正在發出JSONP請求,但服務器正在使用JSON進行響應。
瀏覽器拒絕嘗試將JSON視為JSONP,因為這會帶來安全風險。 (如果瀏覽器 確實 試圖將JSON視為JSONP,那麼它最多會失敗)。
有關JSONP的更多詳細信息,請參閱 此問題 。 請注意,在CORS可用之前使用的同源策略是一個討厭的黑客。 CORS是一個更清潔,更安全,更強大的解決方案。
看起來你正試圖製作一個跨原始的請求,並在一大堆相互矛盾的指令中拋出你能想到的一切。
您需要了解同源策略的工作原理。
有關詳細指南,請參閱 此問題 。
現在關於你的代碼的一些註釋:
contentType: 'application/json',
- 使用JSONP時會忽略此項
- 您正在提出GET請求。 沒有請求體來描述其類型。
- 這將使跨域請求變得非簡單,這意味著除了基本的CORS權限之外,您還需要處理飛行前的問題。
刪除它。
dataType:'jsonp',
- 服務器沒有響應JSONP。
刪除它。 (您可以使服務器使用JSONP進行響應,但CORS更好)。
responseType:'application/json',
這不是jQuery.ajax支持的選項。 刪除它。
xhrFields:{withCredentials:false},
這是默認值。 除非您使用ajaxSetup將其設置為true,否則請將其刪除。
headers: { 'Access-Control-Allow-Credentials' : true, 'Access-Control-Allow-Origin':'*', 'Access-Control-Allow-Methods':'GET', 'Access-Control-Allow-Headers':'application/json', },
- 這些是響應標頭。 它們屬於響應,而不是請求。
- 這將使跨域請求變得非簡單,這意味著除了基本的CORS權限之外,您還需要處理飛行前的問題。
在這方面有一個值得一提的邊緣案例:Chrome(至少某些版本) 使用為CORB設置的算法檢查CORS預檢 。 IMO,這有點傻,因為預檢似乎不會影響CORB威脅模型,CORB似乎與CORS正交。 此外,CORS預檢的機體無法進入,所以沒有任何負面後果只是一個刺激性的警告。
無論如何, 檢查你的CORS預檢響應(OPTIONS方法響應)沒有正文(204) 。 內容類型為application / octet-stream且長度為零的空200也在此處運行良好。
您可以通過使用消息正文計算CORB警告與OPTIONS響應來確認您是否正在進行此操作。
如果你在safari中執行它,它會花費時間,只需從Preferences >> Privacy啟用開發人員菜單,然後從開髮菜單中取消選擇“禁用跨源限制”。 如果只需要本地,則只需啟用開發人員菜單,然後從開髮菜單中選擇“禁用本地文件限制”。
並在Chrome for OSX中打開終端並運行:
$ open -a Google\ Chrome --args --disable-web-security --user-data-dir
OSX上的Chrome 49+上需要--user-data-dir
對於Linux運行:
$ google-chrome --disable-web-security
此外,如果您嘗試使用AJAX或JSON等開發目的訪問本地文件,也可以使用此標誌。
-–allow-file-access-from-files
對於Windows,請進入命令提示符並進入Chrome.exe所在的文件夾並鍵入
chrome.exe --disable-web-security
這應該禁用相同的源策略,並允許您訪問本地文件。
如果您正在使用localhost,請嘗試這個,這是唯一適用於我的擴展和方法(Angular,只有javascript,沒有php)
從問題中不清楚,但假設這是在開發或測試客戶端上發生的事情,並且鑑於您已經在使用Fiddler,您可以讓Fiddler以允許響應進行響應:
- 在Fiddler中選擇問題請求
-
打開
AutoResponder
選項卡 -
單擊“
Add Rule
並將Add Rule
編輯為:-
方法:
在此處
選擇
服務器URL
,例如
Method:OPTIONS http://localhost
-
*CORSPreflightAllow
-
方法:
在此處
選擇
服務器URL
,例如
-
檢查
Unmatched requests passthrough
-
選中
Enable Rules
幾個筆記:
- 顯然,這只是開發/測試的解決方案,在這種情況下,修改API服務是不可能/不切實際的
- 檢查您與第三方API提供商達成的任何協議是否允許您執行此操作
- 正如其他人所說,這是CORS工作方式的一部分,最終需要在API服務器上設置標頭。 如果您控制該服務器,則可以自己設置標頭。 在這種情況下,因為它是第三方服務,我只能假設他們有一些機制,通過它您可以向他們提供原始網站的URL,他們將相應地更新他們的服務以響應正確的標題。
我遇到了這個問題,因為服務器的jsonp響應格式錯誤。 不正確的響應如下。
callback(["apple", "peach"])
問題是,
callback
內的對象應該是一個正確的json對象,而不是一個json數組。
所以我修改了一些服務器代碼並更改了它的格式:
callback({"fruit": ["apple", "peach"]})
瀏覽器在修改後愉快地接受了響應。
標題為“Access-Control-Allow-Origin:*”的返迴響應檢查下面的Php服務器響應代碼。
<?php header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
echo json_encode($phparray);
響應標頭通常在服務器上設置。
在服務器端將
'Access-Control-Allow-Headers'
為
'Content-Type'
您必須在服務器端添加CORS:
如果您正在使用 nodeJS, 那麼:
首先,您
需要
使用以下命令
安裝
cors
:
npm install cors --save
現在
將以下代碼添加
到您的應用程序啟動文件中(
app.js or server.js
)
var express = require('express');
var app = express();
var cors = require('cors');
var bodyParser = require('body-parser');
//enables cors
app.use(cors({
'allowedHeaders': ['sessionId', 'Content-Type'],
'exposedHeaders': ['sessionId'],
'origin': '*',
'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
'preflightContinue': false
}));
require('./router/index')(app);