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）

https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc/related?hl=en

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

在Fiddler中選擇問題請求
打開 AutoResponder 選項卡
單擊“ Add Rule 並將 Add Rule 編輯為：
- 方法： 在此處 選擇 服務器URL ，例如 Method:OPTIONS http://localhost
- *CORSPreflightAllow
檢查 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);