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

這應該禁用相同的源策略,並允許您訪問本地文件。



從問題中不清楚,但假設這是在開發或測試客戶端上發生的事情,並且鑑於您已經在使用Fiddler,您可以讓Fiddler以允許響應進行響應:

  • 在Fiddler中選擇問題請求
  • 打開 AutoResponder 選項卡
  • 單擊“ Add Rule 並將 Add Rule 編輯為:
    • 方法: 在此處 選擇 服務器URL ,例如 Method:OPTIONS http://localhost
    • *CORSPreflightAllow
  • 檢查 Unmatched requests passthrough
  • 選中 Enable Rules

幾個筆記:

  1. 顯然,這只是開發/測試的解決方案,在這種情況下,修改API服務是不可能/不切實際的
  2. 檢查您與第三方API提供商達成的任何協議是否允許您執行此操作
  3. 正如其他人所說,這是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);






cross-origin-read-blocking