[英]Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?
Mod note : 這個問題是關於為什么
XMLHttpRequest/fetch/etc. 在瀏覽器上受相同訪問策略限制（您會收到提及 CORB 或 CORS 的錯誤），而 Postman 則不受。 這個問題不是關於如何修復“沒有'Access-Control-Allow-Origin'...”錯誤。 這是關於它們發生的原因。
請停止發帖：
- CORS 每種語言/框架的配置。 而是找到你相關的語言/框架的問題。
- 允許繞過 CORS 請求的第三方服務
- 為各種瀏覽器關閉 CORS 的命令行選項
我正在嘗試通過連接到內置的Flask的RESTful API使用JavaScript進行授權。 但是，當我發出請求時，出現以下錯誤：
XMLHttpRequest cannot load http://myApiUrl/login.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access.
我知道 API 或遠程資源必須設置 header，但為什么當我通過 Chrome 擴展程序Postman發出請求時它有效？
這是請求代碼：
$.ajax({
type: 'POST',
dataType: 'text',
url: api,
username: 'user',
password: 'pass',
crossDomain: true,
xhrFields: {
withCredentials: true,
},
})
.done(function (data) {
console.log('done');
})
.fail(function (xhr, textStatus, errorThrown) {
alert(xhr.responseText);
alert(textStatus);
});
如果我理解正確，您正在對與您的頁面所在的域不同的域執行XMLHttpRequest 。 因此瀏覽器會阻止它，因為出於安全原因，它通常允許同一來源的請求。 當您想要進行跨域請求時，您需要做一些不同的事情。 有關如何實現這一點的教程是使用 CORS 。
當您使用 Postman 時，它們不受此政策的限制。 引用自跨域 XMLHttpRequest ：
常規網頁可以使用 XMLHttpRequest 對象從遠程服務器發送和接收數據，但它們受到同源策略的限制。 擴展並沒有那么有限。 擴展程序可以與其源之外的遠程服務器通信，只要它首先請求跨域權限。
這不是針對生產的解決方案，也不是必須將應用程序顯示給客戶端的解決方案，這僅在UI和后端開發位於不同服務器上且在生產中它們實際上位於同一服務器上時才有用。 例如：在為任何應用程序開發UI時，如果需要在本地對其進行測試以將其指向后端服務器，那么在這種情況下，這是完美的解決方案。 對於生產修復，必須將CORS標頭添加到后端服務器，以允許跨源訪問。
簡單的方法是只在Google chrome中添加擴展名，以允許使用CORS進行訪問。
只要您想允許不訪問任何“ access-control-allow-origin”頭請求，就啟用此擴展。
要么
在Windows中，將此命令粘貼到運行窗口中
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
這將打開一個新的Chrome瀏覽器，該瀏覽器不允許訪問“ access-control-allow-origin”標頭請求。
警告：使用
Access-Control-Allow-Origin: *會使您的 API/網站容易受到跨站請求偽造(CSRF) 攻擊。 在使用此代碼之前，請確保您了解風險。
如果您使用的是PHP ，這很容易解決。 只需在處理請求的 PHP 頁面的開頭添加以下腳本：
<?php header('Access-Control-Allow-Origin: *'); ?>
如果您使用的是Node-red ，則必須通過取消注釋以下行來允許node-red/settings.js文件中的CORS ：
// The following property can be used to configure cross-origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
origin: "*",
methods: "GET,PUT,POST,DELETE"
},
如果您使用的Flask與問題相同； 你必須先安裝flask-cors
$ pip install -U flask-cors
然后在您的應用程序中包含 Flask cors。
from flask_cors import CORS
一個簡單的應用程序將如下所示：
from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route("/")
def helloWorld():
return "Hello, cross-origin-world!"
有關更多詳細信息，您可以查看Flask 文檔。
我希望有人在很早以前就與我共享了此站點http://cors.io/ ，與構建和依賴我自己的代理相比，它將節省大量時間。 但是，在進入生產階段時，擁有自己的代理服務器是最好的選擇，因為您仍然可以控制數據的各個方面。
一切你需要的：
https://cors.io/?http://HTTP_YOUR_LINK_HERE
因為
$.ajax({type: "POST" - 調用選項
$.post( - 調用POST
兩者是不同的。 郵遞員正確地調用“POST”，但當我們調用它時，它將是“OPTIONS”。
對於 C# Web 服務 - Web API
請在 <system.webServer> 標簽下的web.config文件中添加以下代碼。 這將起作用：
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
請確保您在 Ajax 調用中沒有犯任何錯誤
$.ajax({
url: 'http://mysite.microsoft.sample.xyz.com/api/mycall',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
type: "POST", /* or type:"GET" or type:"PUT" */
dataType: "json",
data: {
},
success: function (result) {
console.log(result);
},
error: function () {
console.log("error");
}
});
注意：如果您正在尋找從第三方網站下載內容，那么這對您沒有幫助。 您可以嘗試以下代碼，但不能嘗試 JavaScript。
System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.microsoft.sample.xyz.com/api/mycall");
如果您使用的是Node.js ，請嘗試：
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
詳細信息： ExpressJS上的CORS
使用Ajax存在跨域問題。 您必須確定要在沒有www.的同一http://路徑上訪問文件www. （或從http://www.訪問並發布到包含www.的相同路徑），當通過www.訪問時瀏覽器將其視為另一個域www. 路徑，以便您查看問題出在哪里。 您正在發布到另一個域，並且由於起源問題，瀏覽器阻止了流量。
如果API不在您所請求的同一主機上，則該流將被阻止，您將需要尋找另一種與API通信的方法。
在以下作為 API 的調查中，我使用http://example.com而不是您的問題中的 http://myApiUrl/login，因為這是第一個工作。 我假設您的頁面位於http://my-site.local:8088上。
注意：API 和您的頁面具有不同的域！
您看到不同結果的原因是 Postman：
Host=example.com （您的 API）Origin 這類似於站點和 API 具有相同域時瀏覽器發送請求的方式（瀏覽器還設置了標頭項Referer=http://my-site.local:8088 ，但是我在 Postman 中看不到） . 當沒有設置Origin標頭時，通常服務器默認允許此類請求。
這是 Postman 發送請求的標准方式。 但是當您的站點和 API 具有不同的域時，瀏覽器會發送不同的請求，然后發生CORS並且瀏覽器會自動：
Host=example.com （你的作為 API）Origin=http://my-site.local:8088 （您的站點） （標頭Referer與Origin具有相同的值）。 現在在 Chrome 的控制台和網絡選項卡中，您將看到：
當你有Host != Origin時，這是 CORS，當服務器檢測到這樣的請求時，它通常會默認阻止它。
當您從本地目錄打開 HTML 內容並發送請求時，將設置Origin=null 。 同樣的情況是當您在<iframe>中發送請求時，就像在下面的代碼片段中一樣（但這里根本沒有設置Host標頭）- 通常，HTML 規范在任何地方都說不透明的來源，您可以將其轉換為Origin=null 。 您可以在此處找到有關此的更多信息。
fetch('http://example.com/api', {method: 'POST'});
Look on chrome-console > network tab
如果你不使用簡單的 CORS 請求，通常瀏覽器會在發送主請求之前自動發送一個 OPTIONS 請求 - 更多信息在這里。 下面的片段顯示了它：
fetch('http://example.com/api', { method: 'POST', headers: { 'Content-Type': 'application/json'} });
Look in chrome-console -> network tab to 'api' request. This is the OPTIONS request (the server does not allow sending a POST request)
您可以更改服務器的配置以允許 CORS 請求。
這是一個在 nginx（nginx.conf 文件）上打開 CORS的示例配置 - 為 nginx 設置always/"$http_origin"和為 Apache 設置"*"時要非常小心 - 這將取消阻止來自任何域的 CORS（在生產中而不是星星使用你的具體頁面地址，它消耗你的 api）
location ~ ^/index\.php(/|$) { ... add_header 'Access-Control-Allow-Origin' "$http_origin" always; add_header 'Access-Control-Allow-Credentials' 'true' always; if ($request_method = OPTIONS) { add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above) add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin'; add_header 'Content-Length' 0; add_header 'Content-Type' 'text/plain charset=UTF-8'; return 204; } }
這是在 Apache 上打開 CORS的示例配置（.htaccess 文件）
# ------------------------------------------------------------------------------ # | Cross-domain Ajax requests | # ------------------------------------------------------------------------------ # Enable cross-origin Ajax requests. # http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity # http://enable-cors.org/ # <IfModule mod_headers.c> # Header set Access-Control-Allow-Origin "*" # </IfModule> # Header set Header set Access-Control-Allow-Origin "*" # Header always set Access-Control-Allow-Credentials "true" Access-Control-Allow-Origin "http://your-page.com:80" Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT" Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"
應用 CORS 限制是由服務器定義並由瀏覽器實現的安全功能。
瀏覽器查看服務器的 CORS 策略並尊重它。
但是，Postman 工具並不關心服務器的 CORS 策略。
這就是為什么 CORS 錯誤出現在瀏覽器中，而不是 Postman 中的原因。
您得到的錯誤是由於 CORS 標准造成的，該標准對 JavaScript 如何執行 ajax 請求設置了一些限制。
CORS 標准是在瀏覽器中實現的客戶端標准。 因此，阻止調用完成並生成錯誤消息的是瀏覽器，而不是服務器。
Postman 沒有實現 CORS 限制，這就是為什么在從 Postman 發出相同調用時看不到相同錯誤的原因。
為什么Postman 不實施 CORS？ CORS 定義了與發起請求的頁面的來源（URL 域）相關的限制。 但在 Postman 中，請求並非來自具有 URL 的頁面，因此 CORS 不適用。
在不同的用例中遇到相同的錯誤。
用例：在 Chrome 中嘗試以 angular 調用 Spring REST端點時。
解決方案：在各個控制器類的頂部添加@CrossOrigin("*")注釋。
如果您想在 javascript 中使用 fetch API 或 XMLHttpRequest 獲取內容時繞過該限制，您可以使用代理服務器，以便它將標頭Access-Control-Allow-Origin為* 。
const express = require('express');
const request = require('request');
const app = express();
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
next();
});
app.get('/fetch', (req, res) => {
request(
{ url: req.query.url },
(error, response, body) => {
if (error || response.statusCode !== 200) {
return res.status(500).send('error');
}
res.send(body);
}
)
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`listening on ${PORT}`));
以上是可以充當代理服務器的示例代碼（需要節點 Js）。 例如：如果我想正常獲取https://www.google.com會拋出 CORS 錯誤，但現在由於請求是通過本地托管在端口 3000 的代理服務器發送的，代理服務器添加了Access-Control-Allow-Origin響應中的Access-Control-Allow-Origin標頭，不會有任何問題。
向 http://localhost:3000/fetch?url= Your URL here發送 GET 請求，而不是直接將請求發送到您要獲取的 URl。
Your URL here的 URL 代表您希望獲取的 URL，例如： https://www.google.com : https://www.google.com
如果您不想：
並且您確定服務器隨后啟用了CORS（在此處測試CORS： http ： //www.test-cors.org/ ）
然后，您需要在請求中傳遞origin參數。 該來源必須與您的瀏覽器發送的與您的請求匹配的來源。
您可以在這里查看其運行情況： http : //www.wikinomad.com/app/detail/Campgrounds/3591
編輯功能將GET＆POST請求發送到另一個域以獲取數據。 我設置了可以解決問題的origin參數。 后端是mediaWiki引擎。
tldr：在您的調用中添加“ origin”參數，該參數必須是瀏覽器發送的Origin參數（您不能欺騙origin參數）
當我使用AngularJS訪問我的API時遇到了這個問題。 相同的請求在SoapUI 5.0和ColdFusion中起作用。 我的GET方法已經具有Access-Control-Allow-Origin標頭。
我發現AngularJS發出了“試用” OPTIONS請求 。 默認情況下，ColdFusion會生成OPTIONS方法，但是這些頭並不多，特別是這些頭。 生成該錯誤是為了響應該OPTIONS調用，而不是我對GET的有意調用。 將下面的OPTIONS方法添加到我的API后，問題已解決。
<cffunction name="optionsMethod" access="remote" output="false" returntype="any" httpmethod="OPTIONS" description="Method to respond to AngularJS trial call">
<cfheader name="Access-Control-Allow-Headers" value="Content-Type,x-requested-with,Authorization,Access-Control-Allow-Origin">
<cfheader name="Access-Control-Allow-Methods" value="GET,OPTIONS">
<cfheader name="Access-Control-Allow-Origin" value="*">
<cfheader name="Access-Control-Max-Age" value="360">
</cffunction>
根據shruti的回答 ，我創建了帶有所需參數的Chrome瀏覽器快捷方式：
https://github.com/Rob--W/cors-anywhere/提供（Node.js）代碼，您可以使用它們來設置和運行自己的CORS代理。 它得到了積極維護，並提供了許多功能來控制代理行為，而不僅僅是基本發送正確的Access-Control-*響應頭。
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS包含詳細信息，以解釋瀏覽器如何處理客戶端Web應用程序從JavaScript發出的跨域請求以及必須配置的標頭如果可以，將請求發送到服務器。
如果您需要向其發出請求並獲得響應的網站沒有返回Access-Control-Allow-Origin響應標頭，則瀏覽器始終會阻止您的客戶端直接向其提出的跨域請求側JavaScript代碼正常工作。 因此，如果該網站是不是一個可以控制，並且可以配置，只有這樣才能在這種情況下，工作的事情是進行代理請求，無論是通過自己的代理服務器運行自己或通過一個開放的代理行為。
如此處其他評論所述，有充分的理由不信任您的請求的開放代理。 就是說，如果您知道自己在做什么，並且決定一個開放代理可以滿足您的需求，則https://cors-anywhere.herokuapp.com/是可靠可用，主動維護並運行該代理實例的代理。 https://github.com/Rob--W/cors-anywhere/代碼。
就像這里提到的其他開放代理（其中至少有一些似乎不再可用）一樣，它的工作方式是與其讓客戶代碼直接將請求發送到例如http://foo.com您將其發送到https://cors-anywhere.herokuapp.com/http://foo.com ，並且代理將必要的Access-Control-*標頭添加到瀏覽器看到的響應中。
您正在向不同的域發出XMLHttpRequest ，例如：
some-domain.comsome-different-domain.com域名的這種差異觸發了稱為SOP （同源策略）的CORS （跨域資源共享）策略，該策略強制在Ajax 、XMLHttpRequest 和其他 HTTP 請求中使用相同的域（因此是Origin ）。
為什么當我通過 Chrome 擴展 Postman 發出請求時它會起作用？
客戶端（大多數瀏覽器和開發工具）可以選擇強制執行同源策略。
大多數瀏覽器執行同源策略以防止與CSRF （跨站點請求偽造）攻擊相關的問題。
Postman作為開發工具選擇不強制執行 SOP，而某些瀏覽器強制執行，這就是為什么您可以通過 Postman 發送您無法使用瀏覽器通過 JS 通過 XMLHttpRequest 發送的請求。
當從服務器請求響應時，我具有以下配置，導致相同的錯誤。
服務器端： SparkJava- >提供REST-API
客戶端： ExtJs6- >提供瀏覽器渲染
在服務器端，我必須將其添加到響應中：
Spark.get("/someRestCallToSpark", (req, res) -> {
res.header("Access-Control-Allow-Origin", "*"); //important, otherwise its not working
return "some text";
});
在客戶端，我必須將此添加到請求中：
Ext.Ajax.request({
url: "http://localhost:4567/someRestCallToSpark",
useDefaultXhrHeader: false, //important, otherwise its not working
success: function(response, opts) {console.log("success")},
failure: function(response, opts) {console.log("failure")}
});
您可以使用YQL通過Yahoo的服務器代理請求，從而繞過該問題。 只是幾行代碼：
var yql_url = 'https://query.yahooapis.com/v1/public/yql';
var url = 'your api url';
$.ajax({
'url': yql_url,
'data': {
'q': 'SELECT * FROM json WHERE url="'+url+'"',
'format': 'json',
'jsonCompat': 'new',
},
'dataType': 'jsonp',
'success': function(response) {
console.log(response);
},
});
這是帶有說明的鏈接： https : //vverma.net/fetch-any-json-using-jsonp-and-yql.html
如果您使用的是Entity Framework ，即使您啟用了CORS ，似乎有時也會引發此錯誤。 我發現錯誤是由於缺少查詢的最終確定而發生的。 我希望這可以幫助處於相同情況的其他人。
以下代碼可以拋出XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. 錯誤：
using (DBContext db = new DBContext())
{
return db.Customers.Select(x => new
{
Name = x.Name,
CustomerId = x.CustomerId,
});
}
要解決此問題，需要在查詢末尾完成諸如.ToList()或.FirstOrDefault()類的終結調用，如下所示：
using (DBContext db = new DBContext())
{
return db.Customers.Select(x => new
{
Name = x.Name,
CustomerId = x.CustomerId,
}).ToList();
}
以我為例，我使用的是JEE7 JAX-RS應用程序，以下技巧對我來說非常有效：
@GET
@Path("{id}")
public Response getEventData(@PathParam("id") String id) throws FileNotFoundException {
InputStream inputStream = getClass().getClassLoader().getResourceAsStream("/eventdata/" + id + ".json");
JsonReader jsonReader = Json.createReader(inputStream);
return Response.ok(jsonReader.readObject()).header("Access-Control-Allow-Origin", "*").build();
}
我可以使用htaccess成功解決（以字體為例），但很明顯，OP要求的差別不大。 但是您可以使用FileMatch模式並添加任何擴展名，以免出現cros錯誤。
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
如果您的服務器是Springboot應用程序，那么請在頂部的rest控制器中添加此注釋- @CrossOrigin
現在應該可以工作了。 謝謝
如果您想在后端（在Flask中）而不是在前端上修復它，我將完全推薦Flask CORS Python軟件包。 燒瓶CORS
在app.py中僅需一行即可自動插入標准，允許任何原始標頭或根據需要對其進行自定義。
熱門問題-如果您已讀完本文但沒有其他幫助，則要看的另一件事。 如果您擁有Akamai，Limelight或類似的CDN，則可能要檢查具有資源URI的緩存鍵。 如果它不包括Origin頭值，則可能是從另一個Origin請求時返回緩存的響應。 我們只花了半天時間調試它。 CDN配置已更新為僅包含屬於我們的幾個選定域的Origin值，而將所有其他域都設置為null。 這似乎可行，並且允許來自我們已知域的瀏覽器查看我們的資源。 當然，所有其他答案都是到達這里的先決條件，但如果CDN是瀏覽器的第一跳，則需要進行檢查。
在我們的案例中，我們可以看到一些請求發送到我們的服務，但幾乎沒有網站發送的請求量。 這將我們引向了CDN。 我們可以回過頭來查看原始請求是從直接請求提供的，而不是瀏覽器AJAX調用的一部分，並且響應標頭Access-Control-Allow-Origin不包括在內。 顯然，CDN緩存了該值。 Akamai CDN配置進行了調整，以考慮將Origin請求標頭值作為匹配的一部分，這似乎使它對我們有用。
如果您從瀏覽器中收到此錯誤消息：
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '…' is therefore not allowed access
當您嘗試對無法控制的遠程服務器發出Ajax POST / GET請求時，請忽略以下簡單解決方法：
<?php header('Access-Control-Allow-Origin: *'); ?>
您確實需要，特別是如果您僅使用JavaScript來執行Ajax請求，則需要一個內部代理來接受您的查詢並將其發送到遠程服務器。
首先，在您的JavaScript代碼中，對您自己的服務器進行Ajax調用，例如：
$.ajax({
url: yourserver.com/controller/proxy.php,
async: false,
type: "POST",
dataType: "json",
data: data,
success: function (result) {
JSON.parse(result);
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr);
}
});
然后，創建一個名為proxy.php的簡單PHP文件，以包裝POST數據並將其作為參數附加到遠程URL服務器。 我舉一個例子，說明如何使用Expedia Hotel搜索API繞過此問題：
if (isset($_POST)) {
$apiKey = $_POST['apiKey'];
$cid = $_POST['cid'];
$minorRev = 99;
$url = 'http://api.ean.com/ean-services/rs/hotel/v3/list?' . 'cid='. $cid . '&' . 'minorRev=' . $minorRev . '&' . 'apiKey=' . $apiKey;
echo json_encode(file_get_contents($url));
}
通過做：
echo json_encode(file_get_contents($url));
您只是在執行相同的查詢，但是在服務器端，此后它應該可以正常工作。
對於GoLang API：
首先，您可以看一下MDN CORS文檔以了解什么是CORS。 據我所知，CORS是關於是否允許請求源訪問服務器資源的。
您可以通過在“服務器響應” Header中設置Access-Control-Allow-Origin來限制哪個請求源可以訪問服務器。
例如，在“服務器響應”中設置以下標頭意味着僅從http://foo.example發送的請求可以訪問您的服務器：
Access-Control-Allow-Origin: http://foo.example
以及以下允許來自任何來源（或域）的請求：
Access-Control-Allow-Origin: *
正如我在錯誤消息中所知， requested resource表示服務器的資源，因此requested resource No 'Access-Control-Allow-Origin' header is present on the requested resource. 表示您沒有在服務器響應中設置Access-Control-Allow-Origin標頭，或者您設置了該類，但請求的來源不在Access-Control-Allow-Origin因此不允許訪問請求：
所請求的資源上沒有“ Access-Control-Allow-Origin”標頭。 因此，不允許訪問原始“空”。
在GoLang中，我使用gorilla/mux軟件包在localhost:9091處構建API服務器，並且通過在響應標頭中添加"Access-Control-Allow-Origin", "*"來允許CORS：
func main() { // API Server Code
router := mux.NewRouter()
// API route is /people,
//Methods("GET", "OPTIONS") means it support GET, OPTIONS
router.HandleFunc("/people", GetPeople).Methods("GET", "OPTIONS")
log.Fatal(http.ListenAndServe(":9091", router))
}
// Method of '/people' route
func GetPeople(w http.ResponseWriter, r *http.Request) {
// Allow CORS by setting * in sever response
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
json.NewEncoder(w).Encode("OKOK")
}
而且我在客戶端中使用JavaScript，在localhost:9092 ，Chrome發出的請求可以從Server localhost:9091成功獲取“ OKOK”。
function GetPeople() {
try {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "http://localhost:9091/people", false);
xhttp.setRequestHeader("Content-type", "text/html");
xhttp.send();
var response = JSON.parse(xhttp.response);
alert(xhttp.response);
}
catch (error) {
alert(error.message);
}
}
此外，您可以通過Fiddler類的工具檢查請求/響應標頭。
這些答案大多數都告訴用戶如何將CORS標頭添加到他們控制的服務器中。
但是，如果您需要不受網頁控制的服務器中的數據，一種解決方案是在頁面上創建腳本標簽，將src屬性設置為沒有CORS標頭的API端點，然后加載該數據到頁面上：
window.handleData = function(data) {
console.log(data)
};
var script = document.createElement('script');
script.setAttribute('src','https://some.api/without/cors/headers.com&callback=handleData');
document.body.appendChild(script);
在JSONP請求中，您應該捕獲“ jsonpCallback”並將其發送回：
$.ajax({
url: lnk,
type: 'GET',
crossDomain: true,
dataType: 'jsonp',
success: function (ip) { console.log(ip.ip); },
error: function (err) { console.log(err) }
});
在后端（如果您使用PHP作為后端）：
echo $_GET['callback'].'({"ip":"192.168.1.1"})';
在這種情況下，后端響應類似於：
jQuery331009526199802841284_1533646326884（{“ ip”：“ 192.168.1.1”}）
但是您可以在前端手動設置“ jsonpCallback”，並在后端捕獲它：
$.ajax({
url: lnk,
type: 'GET',
crossDomain: true,
dataType: 'jsonp',
jsonpCallback: 'get_ip',
success: function (ip) { console.log(ip.ip); },
error: function (err) { console.log(err) }
});
在這種情況下，后端響應類似於：
get_ip（{“ ip”：“ 192.168.1.1”}）
僅針對 .NET Core Web API 項目，添加以下更改：
ConfigureServices()方法中的services.AddMvc()行之后添加以下代碼：services.AddCors(allowsites=>{allowsites.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());
});
Configure()方法中的app.UseMvc()行之后添加以下代碼：app.UseCors(options => options.AllowAnyOrigin());
[EnableCors("AllowOrigin")]
用於瀏覽器測試目的：Windows - 運行：
chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security
從JavaScript到我的php API，這在我身上經常發生，原因之一。 我忘了放<?php header('Access-Control-Allow-Origin: *'); ? <?php header('Access-Control-Allow-Origin: *'); ? 是一個。 這對於跨子域訪問很有幫助。 另一個原因是因為在jQuery ajax請求中我指定了特定的dataType並返回了不同的dataType，所以它引發了錯誤。
此錯誤的最后也是最主要的原因是您請求的頁面上存在解析錯誤。 如果您在瀏覽器中擊中該頁面URL的可能性超過您可能會看到的解析錯誤，並且您將獲得一個行號來解決該問題。
我希望這可以幫助別人。 每次調試都花了我一段時間，我希望我能核對一下清單。
如果您的網關超時太短並且您正在訪問的資源的處理時間比超時時間長，您也可能會收到此錯誤。 這可能是復雜的數據庫查詢等的情況。因此，上面的錯誤代碼可以掩蓋這個問題。 只需檢查錯誤代碼是否為 504 而不是 404，如上面的 Kamils 回答或其他內容。 如果是 504，那么增加網關超時可能會解決問題。
在我的情況下，可以通過在 IE 瀏覽器中禁用同源策略 (CORS) 來消除 CORS 錯誤，請參閱如何禁用同源策略 Internet Explorer 。 執行此操作后，日志中出現純 504 錯誤。
CORS適合您。
CORS是“跨源資源共享”，是一種發送跨域請求的方式。 現在XMLHttpRequest2和Fetch API都支持CORS。
但是它有其局限性。 服務器需要明確聲明Access-Control-Allow-Origin ，並且不能將其設置為“ *”。
而且，如果您希望任何來源都可以向您發送請求，則需要JSONP（還需要設置Access-Control-Allow-Origin ，但可以為'*'）。
對於很多請求方式，如果您不知道要選擇什么，我認為您需要一個功能齊全的組件來做到這一點。 讓我介紹一個簡單的組件咔嗒
如果您使用的是現代瀏覽器（> Internet Explorer9，Chrome，Firefox，Edge等），則強烈建議您使用簡單但美觀的組件https://github.com/Joker-Jelly/catta 。 它沒有依賴關系，小於3 KB，並且以相同的簡陋語法和選項支持Fetch，Ajax和JSONP。
catta('./data/simple.json').then(function (res) {
console.log(res);
});
它還支持所有方式導入項目，例如ES6模塊，CommonJS甚至HTML中的<script> 。
我在Angular中$http.get這個錯誤。 我需要改用$http.jsonp 。
在我的網站（基於.NET）上，我剛剛添加了以下內容：
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders>
</httpProtocol>
</system.webServer>
非常感謝這部影片。
為了完整起見， Apache允許cors：
Header set Access-Control-Allow-Origin "http://www.allowonlyfromthisurl.com"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header set Access-Control-Max-Age "1000"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, Accept-Encoding, Accept-Language, Cookie, Referer"
重新發布我的答案，版主刪除了。 正如我所指出的，OP 的確切錯誤已由此修復。 在刪除此答案之前，至少有 7 人同意這是一個有效的解決方案。
主持人：請考慮可能幫助一個人解決由外部原因引起的問題的價值。 javascript 消息在調試這個特定問題時仍然幾乎沒有用。 此線程仍然是 OP 確切錯誤消息的頂級搜索結果。
刪除的答案如下：
流行的問題——如果你讀到這里並且沒有其他任何幫助，那么要考慮的另一件事。 如果您有諸如 Akamai、Limelight 或類似的 CDN，您可能需要檢查您擁有的緩存密鑰以獲取資源的 URI。 如果它不包含 Origin 標頭值，您可能會返回從另一個 Origin 請求時緩存的響應。 我們只花了半天時間調試這個。 CDN 配置已更新為僅包含我們的幾個選定域的 Origin 值，並將其設置為所有其他域的 null。 這似乎有效並允許來自我們已知域的瀏覽器查看我們的資源。 當然，所有其他答案都是到達這里的先決條件，但如果 CDN 是您瀏覽器的第一跳，則需要查看此內容。
在我們的例子中，我們可以看到一些請求發送到我們的服務，但沒有接近站點發送的數量。 這將我們引向了 CDN。 我們能夠返回並看到原始請求是從直接請求中提供的，而不是瀏覽器 AJAX 調用的一部分，並且響應標頭 Access-Control-Allow-Origin 未包含在內。 顯然 CDN 緩存了這個值。 Akamai CDN 配置調整以將 Origin 請求標頭值視為匹配的一部分似乎使其對我們有用。
要解決此問題，請在后端使用的doGet()或doPost()函數中編寫這行代碼
response.setHeader("Access-Control-Allow-Origin", "*");
而不是在網站或正在訪問網站的 api url 端點中鍵入"*" 。
您的 IP 未列入白名單，因此您收到此錯誤。 要求后端人員將您正在訪問的服務的 IP 列入白名單https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers
“您可以做出的最快修復是安裝moesif CORS擴展： https ://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc/related?hl=en-US
安裝后，在瀏覽器中單擊它以激活擴展程序。 確保圖標的標簽從“關閉”變為“打開”：
然后刷新您的應用程序，您的 API 請求現在應該可以工作了！”
它通過在全球范圍內應用這個中間件對我有用
header('Access-Control-Allow-Origin', '*') ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS') ->header('Access-Control -Allow-Headers', "Accept,authorization,Authorization, Content-Type"); } }對我來說，由於不同的原因我遇到了這個問題，遠程域被添加到原點部署的應用程序完美地工作除了一個端點我遇到了這個問題：
Origin https://mai-frontend.vercel.app is not allowed by Access-Control-Allow-Origin. Status code: 500
和
Fetch API cannot load https://sciigo.herokuapp.com/recommendations/recommendationsByUser/8f1bb29e-8ce6-4df2-b138-ffe53650dbab due to access control checks.
在更新 Heroku 數據庫表后，我發現我的 Heroku 數據庫表不包含本地表的所有列，一切正常。
如果您使用 .NET 作為中間層，請清楚地檢查路由屬性，例如，
當它是這樣的時候我有問題，
[Route("something/{somethingLong: long}")] //Space.
通過這個修復它，
[Route("something/{somethingLong:long}")] //No space
注釋：這個問題是關於為什么Postman不受XMLHttpRequest相同的CORS限制的。 該問題與如何解決“無'Access-Control-Allow-Origin'...”錯誤無關。
請停止發布：
- 陽光下每種語言/框架的CORS配置。 而是找到您相關的語言/框架的問題。
- 允許繞過CORS的請求的第三方服務
- 用於關閉各種瀏覽器的CORS的命令行選項
我正在嘗試通過連接到內置的RESTful API Flask使用JavaScript進行授權。 但是，當我發出請求時，出現以下錯誤：
XMLHttpRequest無法加載http：// myApiUrl / login 。 所請求的資源上沒有“ Access-Control-Allow-Origin”標頭。 因此，不允許訪問原始“空”。
我知道API或遠程資源必須設置標頭，但是當我通過Chrome擴展程序Postman發出請求時，為什么它可以工作？
這是請求代碼：
$.ajax({
type: "POST",
dataType: 'text',
url: api,
username: 'user',
password: 'pass',
crossDomain : true,
xhrFields: {
withCredentials: true
}
})
.done(function( data ) {
console.log("done");
})
.fail( function(xhr, textStatus, errorThrown) {
alert(xhr.responseText);
alert(textStatus);
});
您使用的是 Google、Typekit 等的 Webfonts 嗎？ 您可以通過多種方式使用 Webfonts，例如 @font-face 或 CSS3 方法，出於相同的安全原因，某些瀏覽器（例如 Firefox 和 IE）可能會拒絕嵌入來自某些非標准 3rd 方 URL（例如您的博客）的字體。
為了解決您的 WordPress 博客的問題，只需將下面的內容放入您的 .htaccess 文件中。
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
來源： https : //crunchify.com/how-to-fix-access-control-allow-origin-issue-for-your-https-enabled-wordpress-site-and-maxcdn/
為什么我的 JavaScript 代碼會出現“請求的資源上存在“No 'Access-Control-Allow-Origin' header”
[英]Why does my JavaScript code get a “No 'Access-Control-Allow-Origin' header is present on the requested resource”
Javascript-所請求的資源上沒有“ Access-Control-Allow-Origin”標頭
[英]Javascript - No 'Access-Control-Allow-Origin' header is present on the requested resource
錯誤在請求的資源上沒有“ Access-Control-Allow-Origin”標頭
[英]Error No 'Access-Control-Allow-Origin' header is present on the requested resource
No 'Access-Control-Allow-Origin' header is present on the requested resource error
[英]No 'Access-Control-Allow-Origin' header is present on the requested resource error
跨源資源錯誤：請求的資源上沒有“Access-Control-Allow-Origin”標頭
[英]Cross Origin Resource Error: No 'Access-Control-Allow-Origin' header is present on the requested resource
請求的資源上不存在“Access-Control-Allow-Origin”標頭
[英]No 'Access-Control-Allow-Origin' header is present on the requested resource
角度4-所請求的資源上沒有“ Access-Control-Allow-Origin”標頭
[英]Angular 4 - No 'Access-Control-Allow-Origin' header is present on the requested resource
NodeJ在所請求的資源上不存在“ Access-Control-Allow-Origin”標頭
[英]NodeJs No 'Access-Control-Allow-Origin' header is present on the requested resource
Access-Control-Allow-Origin header 存在於請求的資源上
[英]Access-Control-Allow-Origin header is present on the requested resource
請求的資源 .htaccess 上不存在 Access-Control-Allow-Origin 標頭
[英]No Access-Control-Allow-Origin header is present on the requested resource .htaccess
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.