cURLはCORSルールを適用しません。 これらのルールは、セキュリティの目的でブラウザによって適用されます。

関連するヘッダーを追加したと言うときは、それらのヘッダーをリクエストに追加したことを意味していると思います。 実際には、ヘッダーはサーバーからの応答ヘッダーで予期されており、リソースが他のWebサイトから直接アクセスできることを示しています。

参考までに、CORS-クロスオリジンリソースシェアリング。 APIはそれをサポートしていないため、2つのオプションがあります-

1. Webページと同じドメインのプロキシサーバーを使用して4chanのAPIにアクセスするか、
2. 他のドメインでプロキシサーバーを使用しますが、必要なヘッダーが含まれるように応答を変更します。

この問題を「問題ではない」としてクローズすることに投票したいと思います。

提案ありがとうございます。 プロキシを介してリクエストをルーティングするようにコードを更新しました。

axios.get('https://a.4cdn.org/a/threads.json', {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    proxy: {
      host: '104.236.174.88',
      port: 3128
    }
    }).then(function (response) {
        console.log('response is : ' + response.data);
    }).catch(function (error) {
        if (error.response) {
          console.log(error.response.headers);
        } 
        else if (error.request) {
          console.log(error.request);
        } 
        else {
          console.log(error.message);
        }
    console.log(error.config);
});

ただし、まだこのエラーが発生しています。

クロスオリジンリクエストがブロックされました：同一生成元ポリシーでは、 https：//a.4cdn.org/a/threads.jsonにあるリモートリソースの読み取りが禁止されてい

Stack Overflowに関するさまざまなフォーラムや質問を検索しましたが、これに対する解決策が見つからないようです。 誰かが何らかの洞察を提供できれば幸いです。

これに関するニュースはありますか？ 私はほとんど同じ船に乗っています...

クロスオリジンリクエストがブロックされました：同一生成元ポリシーでは、 https：//a.4cdn.org/a/threads.jsonにあるリモートリソースの読み取りが禁止されてい

これは、 https：//a.4cdn.orgとhttps://boards.4chan.orgが異なるドメインと見なされるためです。 違いはとボードであります

私も同じ問題を抱えています。 誰かがこれについて私を助けてくれますか

さぁぁぁあめ

一時的な解決策として、これを使用できます： https ：

今のところ、これ以上良いものは見つかりませんでした。

@PetitBateauChrome拡張機能が

@ adl1995それは私のためにトリックをしました;）

Chrome拡張機能は、拡張機能を持っている人にのみ役立ちます。 誰もがその拡張機能を持っているわけではないので、本番環境でChrome拡張機能に依存することは良い考えではありません。

だから私はそれが一時的な解決策だと言ったのです。 そしてもちろん、開発環境の場合。

Access-Control-Allow-Originは応答ヘッダーであり、要求ヘッダーではありません。
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

axios.get（url、{headers：{'Access-Control-Allow-Origin'：*}}）は何の意味もありません！

試す
axios.get（url、{クロスドメイン：true}）

@ronnin記録のために、私はあなたの解決策を試しましたが、

AJAXリクエストを行っているリモートサービスは、ドメインからのクロスオリジンAJAXリクエストを受け入れません。 Webサイトのサーバー側コードベースにアクセスできる場合に実行できることの1つは、そこでコントローラーアクションを作成し（MVCを使用していると想定）、それを使用してリモートサービスを利用することです。 その後、コントローラーアクションに対してAJAXリクエストを行うことができます。 このアプローチの利点は、リモートサービスに接続する前に追加のチェックを実行し、その応答をフォーマットし、さらにはキャッシュすることができることです。

みなさん、これを読んでください。
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

私はいつもそのMDNドキュメントへの参照があまり役に立たないと思っています。 その長い文書であり、目前の質問に直接対処していません。 サーバー側のコードベースにアクセスできず、このAPIにアクセスしたい場合はどうすればよいですか？

私の解決策は、ドメインサーバー上に独自のAPIを作成して、クロスオリジンリクエストを許可しない外部APIにアクセスすることです。これをリピーターAPIと呼びます。

@JigzPalilloアプローチやコードを共有できますか？ 私はかなり立ち往生しています！ :(

通常、これは機能しますが、機能せず、そのドメインにアクセスできない場合は...

axios.get('https://www.notmydomain.com/1511.json')
    .then(function (response) {
        console.log(response.data);
});

私がしたことは、サーバー上にリピーターを作成することでした

axios.get('https://www.mydomain.com/repeater.php?url=https://www.notmydomain.com/1511.json')
    .then(function (response) {
        console.log(response.data);
});

/* repeater.php */
function collect_data($url){
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); //remove on upload
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_VERBOSE, 1);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_AUTOREFERER, false);
    curl_setopt($ch, CURLOPT_REFERER, "https://www.notmydomain.com");
    curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    $result = curl_exec($ch);
    echo curl_error($ch);
    curl_close($ch);
return($result);
}
echo collect_data($_GET["url"]);

サーバーは、オプション呼び出しでCORSヘッダーで応答する必要があります。 nodejs / expressを使用している場合は、次の方法ですべてのエンドポイントに対してこれを修正できます。

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();
});

しかし、それは少し緩いです。 おそらく生産のために引き締めたいでしょう。

しかし、私は長い間その問題を解決してきました。 サーバーは3pサービスに属しているため、制御できません。 代わりに単にプロキシしました。 すべてがその面で順調です。

ありがとう

@stevesworkはここでも同じです。サーバーは3pサービスに属しています。私がajax、request.jsを使用できるのはかなり悲しいですが、私が好むaxiosは使用できません👎

@ adl1995は、この問題をまだ修正できるのでしょうか。 このエラーの処理方法を完全に混乱させます

2018年になりましたが、更新はありますか？

@ challenger532いいえまだありません。

エラーはまだ蔓延しています。

私のアドバイス：別のライブラリを使用してください。

さて、これはちょっと私の問題を解決しました。 ほら、私はvuejsとLaravelを使っています...私は次のようにphpでLaravelWebルートを設定しました：

Route::get('distancematrix/{source}/{destination}', function($source,$destination){
 $url = "https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=$source&destinations=$destination&key=YOUR_API_KEY";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_PROXYPORT, 3128);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
$response = curl_exec($ch);
curl_close($ch);

return json_decode($response, true);
});

次に、vuejsファイルを使用してaxiosを使用してルートにリクエストを送信しました。

axios.get("distancematrix/place_id:${this.place.source}/place_id:${this.place.destination}").then(response => {
                    console.log('====================================')
                    console.log(response.data)
                    console.log('====================================')
   })

そして出来上がり、それはうまくいきます。

Laravelを使用する場合、追加機能：

header（ 'Access-Control-Allow-Origin：*'）;

コントローラーまたはルートに戻る前
例：
Route::get('post',function(){ $jav = Blog::all(); header('Access-Control-Allow-Origin: *'); return $jav; });
私の英語でごめんなさい。 これがお役に立てば幸いです。

APIにvue.js（ローカルホストポート8080）とFlaskを使用しています（ローカルホストポート5000）

APIコード（ポート5000のFlask）に小さな変更を加えるだけで済みました。
フラスコ拡張フラスコ-CORSを追加し、それを使用するようにコードを変更しました。
前：

from flask import Flask, request
import json
app = Flask(__name__)

後：

from flask import Flask, request
import json
from flask_cors import CORS
app = Flask(__name__)
CORS(app)

この後、それは機能し、APIを使用できるようになりました。
したがって、これは実際にはaxiosの問題ではありませんが、APIの問題であり、axios.get関数を呼び出さないでFirefoxから警告が表示されます。

ヘッダーとプロキシオプションを設定することで、代わりにResponse to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.を取得しました。

しかし、私はこの拡張機能でそれを回避することができました： https ：

悲しいことに、それは昨日だけで今日はうまくいきませんでした...私はなぜ地獄を理解しようとしてきました

開発モードでの_cors_を回避するためのWebpack開発サーバーを使用したプロキシリクエスト

webpack.configファイルに追加します

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://my-target.com',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    }
  }
}

上記の例はリクエストをプロキシします
axios.post(/api/posts/1 ... . . . .
https://my-target.com/posts/1

上記のGitの例では、リクエストで

axios.get('/api/a/threads.json', {
    headers: {
           //  if u have some headers like this
       //  'Authorization': ' Basic //////some values'
    },
    }).then(function (response) {
        console.log('response is : ' + response.data);
    }).catch(function (error) {
        if (error.response) {
          console.log(error.response.headers);
        } 
        else if (error.request) {
          console.log(error.request);
        } 
        else {
          console.log(error.message);
        }
    console.log(error.config);
});

webpack.configファイル内.......。

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://a.4cdn.org',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    }
  }
}

変更されたwebpack構成プロキシは、このようにリクエストを変更します。

u can see this in chrome dev tool REQUEST HEADERS
https://a.4cdn.org/a/threads.json 

uはこのようにdevServerプロキシで複数のパスを使用できます
webpack.configファイル内.......。

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://a.4cdn.org',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    },
    "/login": {
    "target": 'https://github.com', // for example
    "pathRewrite": { '^/login': '' },
    "changeOrigin": true,
    "secure": false
    },
    "/post": {
    "target": 'https://facebook.com', // for example
    "pathRewrite": { '^/post': '' },
    "changeOrigin": true
    }
  }
}

必要に応じて使用

    "changeOrigin": true,
    "secure": false

私はそれを修正するために何時間も費やしました、そしてどこでも助けがないようです。 簡単で迅速な方法は、Allow-Control-Allow-Origin *と呼ばれるChrome拡張機能を追加することです。 https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

あなただけを助けますが、他の人はどうですか？

なんとなく便利： https ：

Vueとaxiosを試してみると、明らかに同じ問題が発生しました。

sundar6445が提供するソリューションを試してみたところ、完全に機能します。
私が変更したwebpack設定ファイルは/config/index.js。 で参照されているので、これを変更することを好みました/build/webpack.dev.conf.js

その中にあなたは見つけます

module.exports = {
  dev: { 
...
proxyTable: {},

sundarで説明されているように、proxyTableをたとえば次のように変更します。

proxyTable: ({
      '/events': {
        "target": 'http://localhost:3000',
        "changeOrigin": true,
        "secure": false
      }
    }),

これは、/ eventsで始まるすべてがhttp：// localhost ：3000 / eventsにルーティングされることを意味します。 私の場合、「pathRewrite」はありません。相対URLは同じになります。

もちろん、Vueコンポーネントの完全なURLを削除することを忘れないでください。 私が持っていた：

  mounted () {
    axios.get('http://localhost:3000/events/nb')
      .then(result => {
        this.new_et_nb = result.data
        console.log('*******' + JSON.stringify(result) + ', ' + result.data)
      }, error => {
        console.error(error)
      })
  }

あれは。。。になる：

  mounted () {
    axios.get('/events/nb')
      .then(result => {
        this.new_et_nb = result.data
        console.log('*******' + JSON.stringify(result) + ', ' + result.data)
      }, error => {
        console.error(error)
      })
  }

そしてそれは完全にうまく機能します。 @ sundar6445に感謝し

お役に立てれば

これがクローズとマークされていることは知っていますが、何か指摘したいと思います。 APIキーの有効期限が切れているか、他の誰かが使用している場合、このエラーがクライアント側に表示されることがあります。

これは経験豊富な開発者は言うまでもありませんが、コーディングに不慣れな人のために、一意のAPIキーがあることを確認してください。 すべてのAPIが一意のキーを必要とするわけではありませんが、必要な場合は必ず必要になります。 特定のAPIのAPIドキュメントを参照して、必要なものを確認してください。

Axios内にはcrossDomainとしてのオプションはありません。 間違った手がかりを与えたり使用したりする前に、ソースコードを調べてください。

クライアントでJavaScriptを実行して（CORSを無効にし、XSSのターゲットにすることなく）、別のサイトから情報を取得することはできません。

これは、クライアントのブラウザにアクセスして、銀行口座を空にしたり、許可なくサイトに投稿したりするのを防ぐためです。 同じことがスクレイピングサイトにも当てはまります（これは本質的に、opが行おうとしていることです）。

CORSモジュールを備えたサーバーを使用してWebをスクレイピング（つまり、データをフェッチ）し、そのサーバーを介してプロキシすることができます。

このヘッダー構成でこの問題が解決すると思います。

headers: { 'content-type': 'application/x-www-form-urlencoded' }

ありがとう

これは決まり文句に聞こえますが、この問題に対する私の解決策は、この呼び出しを処理するためのカスタムAPIを作成することです。

問題はアクシオスではありません。 問題はサーバーにあります。 データを提供するときは、送信する前に次のヘッダーを追加する必要があります。

Access-Control-Allow-Originは*に設定する必要があります

Access-Control-Allow-Headersは、Origin、X-Requested-With、Content-Type、Acceptに設定する必要があります

ソース： axios.get呼び出しの実行中にCORSエラーが発生しました

これらの回答を参照して、次のように、これらの行をバックエンドExpressサーバーに追加しました。

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://127.0.0.1:8080"); //My frontend APP domain
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    next();
});`

出典： ExpressJSのCORS

また、axiosまたはフロントエンドで追加の構成を行わなくても、すべてが正常に機能するため、実際にはaxiosの問題ではなく、サーバー側のヘッダー構成が不足しています。

最後に、私はstackoverflowに関するこの他の

CORSプリフライトを回避する方法
CORSプロキシを使用して「Access-Control-Allow-Originヘッダーがない」問題を回避する方法
「Access-Control-Allow-Originヘッダーはワイルドカードであってはならない」問題を修正する方法

それが役に立てば幸い。

CORSヘッダーに問題がある（複数の値がないか含まれている）サードパーティのAPIまたはURLからデータをフェッチする場合、これに対する唯一の解決策はこのリンクを使用することだと思います
" https://cors-anywhere.herokuapp.com/ "
私は小さなプロジェクトにはリンクを使用しますが、大きなプロジェクトには、呼び出しを処理するための独自のAPIを作成し、オープンソースプロジェクトhttps://github.com/Rob--W/cors-anywhereを使用できるAPIを作成することをお勧めします

これは機能します：

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

4webmと4chan-list-webmを作成しているときに、この問題にぶつかりました。

ブラウザプラグインを作成する場合、APIをヒットするためにヘッダーを操作する必要がないことに注意してください。 @mootを呼び出すと、CORSが有効になるかもしれません：smile：

クロスドメイン：true

バックエンドCORSでポート「8080」を有効にする必要があり、それが機能しました。

安全

理解を深めるためのwebpackドキュメント： https ：//webpack.js.org/configuration/dev-server/#devserver -proxy

バックエンドAPIにlaravelまたはlumenを使用している場合。 そして、あなたはすでにbarryvdh / laravel-corsパッケージを使用しています。 解決策は、cors.php構成をヘッダー、メソッド、およびオリジン部分として次のように設定することです。
'allowedOrigins' => ['*'], 'allowedHeaders' => ['*'], 'allowedMethods' => ['*'],
うまくいけば、それは誰かの問題を解決します

サファリで行う場合は時間がかかりません。[設定] >> [詳細]から開発者メニューを有効にし、開発メニューから[クロスオリジン制限を無効にする]を選択するだけです。 ローカルのみが必要な場合は、開発者メニューを有効にし、開発メニューから[ローカルファイルの制限を無効にする]を選択するだけです。

Chrome for OSXでターミナルを開き、次のコマンドを実行します。

$ open -a Google\ Chrome --args --disable-web-security --user-data-dir

--user-data-dirはOSXのChrome49以降で必要です

Linuxの場合：

$ google-chrome --disable-web-security
また、AJAXやJSONなどの開発目的でローカルファイルにアクセスしようとしている場合は、このフラグも使用できます。

-–allow-file-access-from-files
Windowsの場合は、コマンドプロンプトに移動し、Chrome.exeがあるフォルダーに移動して、次のように入力します。

chrome.exe --disable-web-security
これにより、同一生成元ポリシーが無効になり、ローカルファイルにアクセスできるようになります。

上記のすべての解決策を試しました。 何も機能しません。
最終的に1つ見つかりました-https：//github.com/expressjs/cors
私はそれがあなたたちを助けることを願っています

主な問題は、サーバー要求とクライアント要求の違いです。

クライアント（ほとんどの場合、ブラウザー）を介して要求を行う場合、ブラウザーソフトウェアに翻弄されます。 ブラウザソフトウェアの標準は、あなた自身のソフトウェアから来るかもしれないし、そうでないかもしれない悪意のある活動の試みを防ぐことです。

自分のサーバー（ブラウザークライアントではない）からリクエストを行う場合、自分で作成したコードについては、（サーバーの設定に応じて）誰もアクセスしたり制御したりすることはできません。種類のリクエストは送信されるため、環境や知識の外部で発生するネットワーク呼び出しの心配はありません。

そのため、ブラウザはクロスオリジンリクエストに厳密に対応しています。特に、パブリックコードがクライアントに配置されると、誰がそれを表示し、誰が操作できるかを制御できなくなるためです。 フロントエンドアプリケーションが危険にさらされ、一部の悪意のあるソフトウェアが訪問者/ユーザーを犠牲にしてコードからネットワーク呼び出しを実行できる場合、彼らはそれが起こらないようにしたいと考えています。 したがって、mydomain.comは、発生するつもりがなかった場合に備えて、allyourdataarebelongtome.comを呼び出すことはできません。

ここでの解決策は、クロスドメインリクエストが機能していないということではありません-独自のサーバーがこれを妨げており、オリジンドメインを受け入れる際にこの状況に対応する必要があるか、API呼び出しを行おうとしているサードパーティサーバーがそのクロスドメインリクエストに加えて、他の認証/承認方法があります。

@mddanishyusufソリューションは私のために働いた。

このヘッダー構成でこの問題が解決すると思います。

headers: { 'content-type': 'application/x-www-form-urlencoded' }

ありがとう

ありがとう！ ;）

ここから： https ：

そこで、自分のサイトで独自のAPIを作成して、これを解決しようとしました。 このようなリクエストを送信しました

axios.get('/sample/request')

次に、 http ： https://a.4cdn.org/に送信し、応答をjsonとしてaxiosに返し

それは私のために働いています、それがあなたを助けることができることを願っています

https://github.com/axios/axios/issues/853#issuecomment -408218917は、 fetch APIと.NET4.5 WebAPIで動作しました。

私が理解しているように、問題は、リクエストがloclahost：3000からloclahost：8080に送信され、ブラウザがCORSなどのリクエストを拒否することです。 したがって、解決策はプロキシを作成することでした。ブラウザは、リクエストが1つのサーバーから送信されたときにリクエストを処理します。
私が間違っている場合は私を訂正してください

私の解決策は：
'http-proxy-middleware'からプロキシをインポートします
app.use（ '/ api / **'、proxy（{target： "http：// localhost：8080"}））;

同じ問題が発生し、バックエンド（Express）に「cors」をインストールして解決しました。

走る：
npm install cors

次に、これを設定します。

var cors = require('cors');
app.use(cors());

@fernandoruchに感謝し

私は同じ問題を抱えてそれを解決しました

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

最初は動作しましたが、その後停止し、理由がわかりませんでした。

次に、すべてのコードを別のファイルに移動したので、ルーターを使用する必要があることに気付きました。

router.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

やあ、

この問題に関する更新は、.net core2.1とaxios0.18を使用しています。

ありがとう。

問題はaxiosにあるとは思いません。問題は、バックエンドサーバーにあります。

私の場合、バックエンドにFlaskがあり、Vue.JSでaxiosを使用しているアーキテクチャがありますが、Flaskサーバーで実行する必要があるのは次のとおりです。

...
from flask_cors import CORS
...
CORS(app)

ただし、これは本番環境に移行するべきではありません。nginxレベルでクロスオリジン許可リストを作成することもできます。 私はこれを読み通しました、役に立つかもしれません。

一時的な解決策として、これを使用できます： https ：

今のところ、これ以上良いものは見つかりませんでした。

悪いアイデア

Darksky WeatherAPIにaxios.get()リクエストを送信しようとしたときに、この問題が発生しました。 DarkskyのFAQページを読んだとき、これとまったく同じ問題に関する質問を見つけました。彼らは、情報への意図しない悪意のあるアクセスを防ぐためのセキュリティ対策としてこれを使用し、データベースにアクセスするためのプロキシを作成することを提案しました。

package.jsonファイルに次の変更を加えました（create-react-appを使用しています）。

{
  "proxy": "https://api.darksky.net/forecast/[myKey]
}

myKeyは、Darkskyからデータにアクセスするために提供されました。

これは非常に簡単な修正で、私にとってはうまくいきました！ 多くのAPIサービスがこれをセキュリティ対策として使い始めているのではないかと思います。 うまくいけば、私の解決策が同様の問題を抱えている他の人を助けることができます。

要約すると、プロキシを作成します。

@fernandoruchに感謝します。 node.jsサーバーのapp.jsに追加すると機能します

var cors = require('cors');
app.use(cors());

import axios from 'axios'
import jsonpAdapter from 'axios-jsonp'

axios.get(`${url}`, { adapter: jsonpAdapter })
        .then(result => {
            console.log('Status Code: ' + result.status)
        })
        .catch(error => console.log('Request failed'))

JSONP（JSON with PaddingまたはJSON-P）は、クライアントとは異なるドメインにあるサーバーからデータを要求するために使用されます。 JSONPは、同一生成元ポリシーをバイパスしてデータの共有を可能にします。

外部API呼び出しにはjqueryの$ .getを使用します。

CORSヘッダーに問題がある（複数の値がないか含まれている）サードパーティのAPIまたはURLからデータをフェッチする場合、これに対する唯一の解決策はこのリンクを使用することだと思います
" https://cors-anywhere.herokuapp.com/ "
私は小さなプロジェクトにはリンクを使用しますが、大きなプロジェクトには、呼び出しを処理するための独自のAPIを作成し、オープンソースプロジェクトhttps://github.com/Rob--W/cors-anywhereを使用できるAPIを作成することをお勧めします

これは機能します：

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

@ yasincidem-あなたはこの提案の絶対的なダイヤモンドです。 乾杯-私は解決策を探すためにウェブ全体で多くの道をたどってきました、そしてあなたは私の特定のシナリオのために働いた最初のものです。

私はちょうどこの問題を越えました。 この特定のサードパーティAPIを機能させるために{withCredentials: true} （他のAPIからのコピーアンドペースト）がありました。 {withCredentials: true}削除するだけ

このソリューションは私のために働きます

axios.get(myurl, {
    crossDomain: true
}).then(res => { 
    console.log(res);
}).catch(error => {
    console.log('error', error);
})

参照https://stackoverflow.com/questions/42422494/cross-domain-at-axios

CORSヘッダーに問題がある（複数の値がないか含まれている）サードパーティのAPIまたはURLからデータをフェッチする場合、これに対する唯一の解決策はこのリンクを使用することだと思います
" https://cors-anywhere.herokuapp.com/ "
私は小さなプロジェクトにはリンクを使用しますが、大きなプロジェクトには、呼び出しを処理するための独自のAPIを作成し、オープンソースプロジェクトhttps://github.com/Rob--W/cors-anywhereを使用できるAPIを作成することをお勧めします

これは機能します：

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

並外れて動作します!!!

axiosに切り替えるときにもこの問題が発生しました
私たちのセットアップはwebpack + devServer（プロキシ付き）+ axiosです

問題は、「/ api」だけでなく、完全なapiURLをaxiosのbaseURLとして使用したことでした（プロキシはターゲット属性を介してマッピングを行います）

私の意見では、これは私たち自身の過ちによるものかもしれません。 上記と同じ問題が発生しています。 2日間、私はこの問題を探すのに時間をかけました。 それは私が見つけた小さな問題であることがわかりました。 入力したURLアドレスが解析ドキュメントに準拠していません。 そして今、axiosは私のAngular7で完全に機能します

フラスコまたは他のサーバーでCORSが有効になっているかどうかを確認します。
また、サーバーアドレスが正しいかどうかを確認してください。サーバーのポートを追加し忘れたためにスタックしました。
axios.get（ 'http：// localhost：5000 / jsonshow'）
.then（response =>（this.array = response））

「 localhost：3000 」を「 http：// localhost ：300」に変更すると、問題なく動作します（サーバー側でcorsを有効にしてください）

「 localhost：3000 」を「 http：// localhost ：300」に変更すると、問題なく動作します（サーバー側でcorsを有効にしてください）

3000ではなくポート300で実行している場合。

VueJSに、プロジェクトのルートにvue.config.jsという名前のファイルが存在しない場合は作成して、次のようなものを追加できます。

module.exports = {
  devServer: {proxy: 'http://localhost:3000'}
}

次に、 Axios呼び出しは次のようになります。

axios.get('/api/say_hello', {})

CORSヘッダーに問題がある（複数の値がないか含まれている）サードパーティのAPIまたはURLからデータをフェッチする場合、これに対する唯一の解決策はこのリンクを使用することだと思います
" https://cors-anywhere.herokuapp.com/ "
私は小さなプロジェクトにはリンクを使用しますが、大きなプロジェクトには、呼び出しを処理するための独自のAPIを作成し、オープンソースプロジェクトhttps://github.com/Rob--W/cors-anywhereを使用できるAPIを作成することをお勧めします

これは機能します：

axios.get（ ${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json ）
.then（res => {
console.log（res）
}）

これは私のために働いた！ ありがとう！

これを試してください：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import axios from 'axios';

Vue.config.productionTip = false;

// ======================
axios.defaults.withCredentials = false;
axios.defaults.proxy = {
  host: 'http://localhost',
  port: 5000,
};
// ======================
new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

CORSヘッダーに問題がある（複数の値がないか含まれている）サードパーティのAPIまたはURLからデータをフェッチする場合、これに対する唯一の解決策はこのリンクを使用することだと思います
" https://cors-anywhere.herokuapp.com/ "
私は小さなプロジェクトにはリンクを使用しますが、大きなプロジェクトには、呼び出しを処理するための独自のAPIを作成し、オープンソースプロジェクトhttps://github.com/Rob--W/cors-anywhereを使用できるAPIを作成することをお勧めします

これは機能します：

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

時間を節約して、どうもありがとうございました！

@ronnin記録のために、私はあなたの解決策を試しましたが、

何？ 本当に？ 私にとってそれは間違いなく機能しました...
GETメソッドの場合、チャームのように機能します。

@ronninコメントに基づいて、パブリックAPIを使用して作成した例を次に示します。
axios.get('https://world.openfoodfacts.org/api/v0/products', { crossdomain: true }) .then(function (response) { console.log(response.data); })

今は2019年ですが、更新はありますか？ 😃

アプリの開発にこのChrome拡張機能を使用しています
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

@ronnin記録のために、私はあなたの解決策を試しましたが、

問題を抱えている男性は、CORSについて十分に認識されていないため、前述の@ seungha-kimの記事を読む必要があります： https ：//developer.mozilla.org/en-US/docs/Web/HTTP/CORS

要約として：

1. リクエストしたリモートリソースは、リクエスト元と同じホスト上にない場合（いわゆる：origin）、リソース（別名）とともに追加のCORSヘッダーを提供する必要があります。 アクセス制御許可：ホスト（オリジン）、ヘッダー、メソッドなど。
2. ブラウザによるリクエストまたはヘッダー「Access-Control-Request-Method」を使用したcurl 、メソッド「OPTIONS」を使用したリクエストは、目的のメソッド「GET」、「POST」などの前に最初に自動的に試行されます。
   つまり、リモートリソースのハンドラーは、メソッド 'OPTION'を特別に処理する必要があります。 例（nginx）：
   `` `グルーヴィー
   場所/ the-remote-resource {
   if（$ request_method = 'OPTIONS'）{
   add_header'Access-Control-Allow-Origin '$ http_origin;
   add_header'Access-Control-Allow-Headers''DNT、Keep-Alive、User-Agent、X-Requested-With、If-Modified-Since、Cache-Control、Content-Type、Authorization ';
   add_header'Access-Control-Allow-Methods''OPTIONS、GET、POST、PUT、PATCH、DELETE ';
   add_header'Access-Control-Allow-Credentials 'true;
   add_header'Access-Control-Max-Age '1728000; ＃20d

    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
   return 204;
  }
 // more ...

}
`` `

1. 上記のように、各Access-Control-Allow- *ヘッダーに値*を使用しませんでした。
   値*、多くの制限があります。
   NS。 値*からAccess-Control-Allow-Origin、Access-Control-Allow-Headers、Access-Control-Allow-Methodsは、Access-Control-Allow-Credentials = trueでは機能しません。 リクエストでCookieが必要な場合は、Access-Control-Allow-Credentials = trueが必要です。
   NS。 *のみが有効で、*。google.comは無効です

1. Access-Control-Allow-Headersは、リクエストのヘッダーのリストです。 そこにリストされていないいくつかのヘッダーが存在すると、ブロックされます。 ヘッダーをチェックしてAccess-Control-Allow-Headersにオプトインするだけです

2. 問題は主にクライアント（ブラウザー、クライアントアプリ）ではなく、サーバーが要求したリソースにあります。

3. サーバー側の開発者と話してください

お役に立てば幸いです

@ronnin ：あなたの

@ronnin ：あなたの

以下のアプリを使用して、リクエストを機能させます

サーバーがCORSを有効にしなかったにもかかわらず、それは私のために働きました

https://cors-anywhere.herokuapp.com/

使用法 ：

url = https://cors-anywhere.herokuapp.com${url} ;
`

@ronnin ：あなたの

私のGETリクエストがCORSを有効にしていないサーバーからリソースをリクエストしている場合、基本的にフロントエンドからXHRリクエスト（別名AJAXリクエスト）を介して直接できることは何もありません。 はい！
プロトコルに従い、リクエストを拒否するのはブラウザです。
ただし、location.href、iframe、form.actionなどの従来のブラウザリクエストでリソースを取得できます

ほとんどの場合、CORSを有効にせずに3番目のリソースを要求する問題を解決するために、自己制御サーバー側を備えた自己所有のリバースプロキシサーバー（nginxなど）をセットアップします。
@ndjerrouが言及したHerokuアプリがその例です。

自動運転車とAIがありますが、それでもCORSに苦労しています

herokuをプロキシとして使用してこれを解決することができました。

これが私のコードです。

fetch("https://cors-anywhere.herokuapp.com/boards.4chan.org/biz/thread/13932651.json")
           .then(res => { //returns a readable stream
                  res.body.getReader().read().then(r => { //returns a Uint8 buffer array
                       var result = new TextDecoder("utf-8").decode(r.value); //Decodes the buffer array into a string
                           console.log(JSON.parse(result)) //the result you want
                   })
            })

今は2020年ですが、更新はありますか？ 😃

確認できますが、2020年ですがまだ更新されていません。
fetch（）にはmode: 'no-cors'モードがありますが、なぜaxiosに似たようなものがないのですか？

私は試した

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'

そして、それらのヘッダーはどれも機能しませんでした。 真と偽の両方の状態でwithCredentialsを試しましたが、機能しませんでした。

フェッチを使用すると、正常に機能します。

CORSポリシーに対処したくないが、それでもaxiosを使用したい場合は、どうすればよいですか？
編集：さらに、なぜこの問題は解決されたのですか？ 明らかに、これにはまだ問題があります。

'Access-Control-Allow-Origin'を定義する必要があります： 'YOUR_IP:YOUR_PORT'は、リクエストヘッダーではなくレスポンスヘッダーにあります。

確認できますが、2020年ですがまだ更新されていません。
fetch（）にはmode: 'no-cors'モードがありますが、なぜaxiosに似たようなものがないのですか？

私は試した

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'

そして、それらのヘッダーはどれも機能しませんでした。 真と偽の両方の状態でwithCredentialsを試しましたが、機能しませんでした。

フェッチを使用すると、正常に機能します。

CORSポリシーに対処したくないが、それでもaxiosを使用したい場合は、どうすればよいですか？
編集：さらに、なぜこの問題は解決されたのですか？ 明らかに、これにはまだ問題があります。

アクシオスに問題はありません。そのため、問題は解決されました。 椅子に座ってMDNの記事を読んでください： https ：

南辕北辙、徒劳¹功

みんなありがとう、それは助けになりました！ ご不便をおかけして申し訳ありません！

デバイスのモバイルホットスポットを使用していたときに、axiosでこのエラーが発生しました。 それから私が喫茶店でWiFiを使用したとき、私はCORBを手に入れませんでした

ウィキペディアAPIを使用してみましたが、同じ問題が発生しました。
URLにorigin=*を追加すると、修正されました。

const endpoint = `https://en.wikipedia.org/w/api.php?action=query&origin=*&list=search&srsearch=${searchTerm}&format=json`;

私はaxiosを使用せずにそれを解決し、$ ajaxと$ getを使用して外部URLからGETを試しましたが、古いjqueryのものには問題がありませんでした。 確かにバグです。

今は2021年ですが、更新はありますか？ 😃

axios（0.18.0）とchrome（75.0.3770.100）からzapier Webhookをヒットしようとしたときに、同様の「Access-Control-Allow-Headers」関連の問題が発生しています。

私のリクエストは：

axios.post("https://hooks.zapier.com/hooks/catch/xxx/xxxx", { email });

サポートされていないヘッダーに関するエラーが表示されます。

CORSポリシーによってブロックされています：リクエストヘッダーフィールドのcontent-typeは、プリフライト応答のAccess-Control-Allow-Headersでは許可されていません

このページを読んだ後、私の理解は次のとおりです。

• 1. Zapierは、少なくとも「content-type」のAccess-Control-Request-Headersをサポートするようにサーバー応答を構成する必要があります
• 1. プリフライトOPT中に「content-type」ヘッダーチェックを何らかの方法で除外するようにリクエストを構成する必要があります。

オプション2を達成するための提案はありますか？ Access-Control-Request-Headersに関するZapierの

編集：これはaxiosとはほとんど/まったく関係がないと確信していますが、Zapier側のサポートはかなり不十分です。 URLパラメータを使用してGETに切り替えた後、リクエストは機能するようです。

よくある質問で、コンテンツタイプパラメータが不要であると言及されている場合は、
olを試すことができます
Var xhr = new XMLHTTPRequest（）を実行し、axiosを使用せずにその方法で試してください。

クライアントまたはサーバーのWebhookへの投稿はありますか？

火、2019年6月25日には、15:27ピート・シュミッツの[email protected]は書きました：

同様の「Access-Control-Allow-Headers」関連の問題が発生しています
axios（0.18.0）とchromeからzapierwebhookをヒットしようとしている間
（75.0.3770.100）。

私のリクエストは：

axios.post（ "https://hooks.zapier.com/hooks/catch/xxx/xxxx"、{メール}）;

サポートされていないヘッダーに関するエラーが表示されます。

CORSポリシーによってブロックされています：リクエストヘッダーフィールドのコンテンツタイプは許可されていません
飛行前応答のAccess-Control-Allow-Headersによる

【画像：画像】
https://user-images.githubusercontent.com/3190970/60138000-9ccdda80-975d-11e9-8f6d-e47bcffe91f1.png

このページを読んだ後、私の理解は次のとおりです。

-
1. Zapierは、サポートするためにサーバー応答を構成する必要があります
Access-Control-Request-少なくとも「content-type」のヘッダー
-
1.どういうわけか除外するようにリクエストを設定する必要があります
「content-type」ヘッダー-プリフライトOPT中のチェック。

オプション2を達成するための提案はありますか？ Zapierの一般的な問題
Access-Control-Request-Headersについて
https://zapier.com/help/common-problems-webhooks/#posting-json-from-web-browser-access-control-allow-headers-in-preflight-response-error
リクエストの「コンテンツタイプをカスタマイズしない」ことを提案します。 しかし、私は
リクエストにヘッダーオプションがなく、デフォルトのヘッダーもありません
axiosに構成されているので、これはaxios側で暗黙的であるとしか想定できませんか？

—
あなたがコメントしたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/axios/axios/issues/853?email_source=notifications&email_token=AHVHGUIDC6DW3YPEKZ2HHZTP4KLWHA5CNFSM4DIVKOX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AHVHGUKX32PVCFPCZGRURD3P4KLWHANCNFSM4DIVKOXQ
。

これに関するニュースはありますか？ 私はほとんど同じ船に乗っています。

@imranimu問題は、使用しているブラウザとリクエスト先のサーバーの組み合わせです。 ブラウザがCORSチェックを無視するAPIを公開しない限り、axiosはそれについて何もできません。

いくつかのオプションがあります。

要求しているサーバーを制御している場合は、次のヘッダーを使用して、すべてのOPTIONS要求にサーバーが応答できるようにします。

Access-Control-Allow-Origin: https://www.mywebsite.com <<REPLACE WITH YOUR SITE - USE COMMA IF MORE THAN ONE>>
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: Access-Control-Allow-Origin

Expressを使用すると、これは次のようになり、ミドルウェアチェーン内の他のルートの前に配置されます。

app.options('/*', (req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'https://www.mywebsite.com');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin');
    res.send(HttpStatusCode.OK);
});

また、応答にヘッダーAccess-Control-Allow-Origin: https://www.mywebsite.com' <<replace with your website or list of sites>>を追加する必要があります。

app.get('/my-cors-friendly-route', async (req, res, next) => {
   const data = await this.http.get('https://www.someothersite.com');
   res.append('Access-Control-Allow-Origin', 'https://www.mywebsite.com');
   res.json(data)
});

簡単に言えば、ブラウザは、別のオリジン（ドメイン）でリソースをリクエストしていることを認識しているため、プリフライトチェックを送信して（GET、POSTなどではなくOPTIONSリクエストメソッドタイプを使用）、サーバーが問題ないと言っているかどうかを確認しますリクエストを受信します。 これは、サードパーティのWebサイトがAPIを使用する可能性を減らすための基本的なブラウザセキュリティ対策です。これは望ましくない場合があります。 上記のコードは基本的に、特定のWebサイトがAPIを使用しても問題がないことを示しています。 すべてのWebサイトで使用できる場合は、 Access-Control-Origin: *ます。

または、リクエスト先のサーバーを制御していない場合は、ページを提供しているサーバー上のルートを公開します。これにより、リクエストが作成（プロキシ）されます。 これは、公開されたルートがアプリケーションと同じオリジン（ドメイン）を持っているため、CORSポリシーが適用されず、ルートを公開したサーバーがブラウザーではないため、CORSエラーを受け取らないために機能します。

@ Aitchy13接続しているAPIサーバーにAccess-Control-Origin: * 、コンソールからこの問題のようにこのエラーが発生します。

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ‘https://<my_api_host>/Data/Login/’. (Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’).

また、あなたは言う、追加するには...

res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin');

...しかし、 Access-Control-Allow-Originは、要求ではなく応答のためだけではありませんか？

Access-Control-Allow-Origin : * ...非常に奇妙な場合はサポートされません。

将来可能な解決策を支援するためのいくつかの参照用のAPIの応答ヘッダーの一部を次に示します。

（これは、CORSが原因で拒否される実際のリクエストの前のOPTIONSメソッドリクエストから外れています）
応答ヘッダー

HTTP/1.1 204 No Content
Date: Fri, 28 Jun 2022 04:08:58 GMT
Server: Apache
X-DNS-Prefetch-Control: off
X-Frame-Options: SAMEORIGIN
Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Download-Options: noopen
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Surrogate-Control: no-store
Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate
Pragma: no-cache
Expires: 0

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Headers: api-key,content-type

Vary: Access-Control-Request-Headers
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive

それとも何か問題がありますか？ この問題で私のラップトップを半分にスナップしようとしていました。

私は同じ問題を抱えていましたが、いくつかの解決策をテストして何度か試みましたが、どれもうまくいきませんでした。 package.jsonにプロキシを設定した後でのみ。
追加：
「プロキシ」：「APIアドレス」
それはcorsをバイパスします。

@IkarosFeitosa設定プロキシ設定を投稿できますか？

@zacharytyhaczサーバーがAccess-Control-Allow-Origin: *応答する場合、ブラウザーの資格情報を送信することはできません。

また：

1. *を特定のWebサイトアドレスに変更します。
2. 使用しているaxiosリクエスト関数のconfig / optionsパラメータに...withCredentials: falseを設定します。
3. 使用しているaxiosリクエスト関数のconfig / optionsパラメータのプロキシプロパティを有効なプロキシに設定します（以下の例）

proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }

何か進展はありますか？ resposneヘッダーを設定するようにWebサーバーを構成しましたが、機能しないようです。

私はこのエラーのヒントを混乱させています：

CORSはWebブラウザーの制限である必要があり、サーバーのリターン許可が必要です。私はすでにこのCorsを許可していますが、ブラウザーはNo 'Access-Control-Allow-Origin' header is present on the requested resource教えてくれました。

サーバーのcorsconfigをfetchapiで試してみましたが、うまく機能します。

あなたは急行でnodejsを使用している場合。 その投稿はあなたを助けるかもしれません。

たとえば、一部のパスのみをcorsで許可したい場合は、次のようにします。
/home/fridge -他のオリジンからは許可されていません
/home/toilet -他のオリジンから許可する必要があります

あなたは次の実装を試すことができます（私のために働いた）

ルート/home.js内

const express = require('express')
const router  = express.Router()

router.options("/toilet", function(req, res, next){
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
  res.send(200);
});

あなたは急行でnodejsを使用しない場合-のためにグーグルでみてくださいOPTIONSメソッド要求

エクスプレスからテスト済み：4.16.3

いいえ、:)開発時に問題が発生します（httpを使用）
サーバーでリリースするとき（httpsを使用）
それは起こりませんでした。
アドオンをインストールするだけです： https ：

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'）;
次（）;
}）;

それは私の人生を解決しました！

提案ありがとうございます。 プロキシを介してリクエストをルーティングするようにコードを更新しました。

axios.get('https://a.4cdn.org/a/threads.json', {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  proxy: {
    host: '104.236.174.88',
    port: 3128
  }
  }).then(function (response) {
      console.log('response is : ' + response.data);
  }).catch(function (error) {
      if (error.response) {
        console.log(error.response.headers);
      } 
      else if (error.request) {
        console.log(error.request);
      } 
      else {
        console.log(error.message);
      }
  console.log(error.config);
});

ただし、まだこのエラーが発生しています。

クロスオリジンリクエストがブロックされました：同一生成元ポリシーでは、 https：//a.4cdn.org/a/threads.jsonにあるリモートリソースの読み取りが禁止されていhttps://boards.4chan.org 」と一致しません）。

Stack Overflowに関するさまざまなフォーラムや質問を検索しましたが、これに対する解決策が見つからないようです。 誰かが何らかの洞察を提供できれば幸いです。

こんにちはみんな、アクシオスの呼び出しの前にこれを試してみてください、それは私のために働いています

headers.set('Content-Type', 'application/json')

これが私の解決策でした

const key = 'sdmhfkhskdfhkshdkfhsdhfksl';
    const locationUrl = `https://api.fjdsghfjsdghfjgshdjfg`;
    axios.defaults.headers.common['x-api-key'] = key;
    const myresult = await axios.get(locationUrl, { crossdomain: true }).then((result) => {
        return result.data;
    });

このCORSの問題を修正する方法についてのビデオを作成します。 このコメントを私のYouTubeビデオへのリンクで更新します。

編集：
https://youtu.be/hxyp_LkKDdk

今は2021年ですが、更新はありますか？ 😃

はい私は私のたわごとにとても夢中です私は本当にその年のたわごとをチェックしなければなりませんでした😆

fetchを使用して、サーバーのcorsが最初に機能するかどうかをテストします。

と...

axiosは私のkoa-server axiosをリクエストできますが、 iris直接リクエストすることはできません。どちらも、人気のあるcors-middlewareを備えています。

1358

この問題に対する公式の解決策がないのはなぜですか？ 私はこのスレッド全体を読み、誰も標準的な方法で実際に解決していない普遍的な問題のように見えることに困惑しています。

この問題に対する公式の解決策がないのはなぜですか？ 私はこのスレッド全体を読み、誰も標準的な方法で実際に解決していない普遍的な問題のように見えることに困惑しています。

CORSの問題全体は、Axiosでも、JavaScript自体でもありません。 これは、ほとんどまたはすべてのブラウザに組み込まれているセキュリティ機能です。 それを「ハック」する方法はいくつかありますが、正しいヘッダーで応答するかどうかはサーバー次第です。

この問題に対する公式の解決策がないのはなぜですか？ 私はこのスレッド全体を読み、誰も標準的な方法で実際に解決していない普遍的な問題のように見えることに困惑しています。

CORSの問題全体は、Axiosでも、JavaScript自体でもありません。 これは、ほとんどまたはすべてのブラウザに組み込まれているセキュリティ機能です。 それを「ハック」する方法はいくつかありますが、正しいヘッダーで応答するかどうかはサーバー次第です。

それで、その応答を考えると、CORS問題の修正を実装する最も「成功した」方法は何ですか？

わかりました、2日間の調査の後、私はついにそれを手に入れました。

厳密に言えば、これはアクシオスの問題ではありません。 実際、これは問題と見なされてはなりません。 axiosは、奇妙で煩わしいCORS標準に従って動作するように設計されているため、メッセージ： CORS header ‘Access-Control-Allow-Origin’ missingが発生することが予想されます。これは、axiosの正しい動作です。 前に述べたように、4chan apiの例では、問題はaxiosではなく、CORS標準に準拠していない4chanapi自体です。

一部の人々は、プロキシを使用してヘッダーの検証をすべて回避するという古いトリックを提案しています。 これは、トリックの実行方法を説明するNegar Jamalifardのブログです： https ：//medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3ちなみに、これが悪い習慣と見なされるかどうかはわかりません。

私の場合、axiosに気付くまで、自分のローカルホストでasp net core apiに接続しようとして2日間、getリクエストを送信する前に、サーバーのOPTIONSメソッドとして送信される「プリフライトリクエスト」を自動的に送信していました。処理する準備ができていません。 責任がある人がいる場合は、メッセージを非常にあいまいに表示するためにChromeとFirefoxを使用します。

一部の人々は、プロキシを使用してヘッダーの検証をすべて回避するという古いトリックを提案しています。 これは、トリックの実行方法を説明するNegar Jamalifardのブログです： https ：//medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3ちなみに、これが悪い習慣と見なされるかどうかはわかりません。

では、これらの呼び出しでは、プロキシだけが最善のケースですか？ 残念です。

では、これらの呼び出しでは、プロキシだけが最善のケースですか？ 残念です。

ええと...あなたはまた、あなたが消費しようとしているAPIを作成している男と話をして、それを修正するように頼むことができます。

私は問題を解決しました：
axiosの場合：url = " http：// localhost ：8080" method = 'post'
私のDjangoサーバーの応答について：
uesrItem = {'user'： 'xxx'}
応答= JsonResponse（userItem）
response ["Access-Control-Allow-Origin"] = " http：// localhost ：8080"
response ["Access-Control-Allow-Credentials"] = 'true'
response ["Access-Control-Allow-Methods"] = "POST、OPTIONS"

問題はアクシオスではなく、要求しているAPIです！

たとえば、FlaskでAPIをコーディングし、GETメソッドは次のようになりました。

@app.route('/api/autores', methods=['GET'])
def get_users():
    drivers_json = []
    for user in user_dao.list_users():
        drivers_json.append(user.to_json())
    return make_response(jsonify(drivers_json), 201)

しかし、API応答にヘッダーを追加すると、問題は解決しました。

@app.route('/api/autores', methods=['GET'])
def get_users():
    drivers_json = []
    for user in user_dao.list_users():
        drivers_json.append(user.to_json())
    response = jsonify(drivers_json)
    response.headers.add('Access-Control-Allow-Origin', '*')
    return response

次に、axios応答をログに記録すると、次のようになります。

{data: Array(4), status: 200, statusText: "OK", headers: {…}, config: {…}, …}

皆さんが使用しているAPIはわかりませんが、Flaskでは解決されました。

私の場合、アクシオスには何の問題もありませんでした。 APIを作成した人にCORSサーバー側を有効にするように依頼しました。

これを試して

delete axios.defaults.headers.common["X-Requested-With"];

https://github.com/Rob--W/cors-anywhereの回避策を使用して問題なく動作しましたが、実際には、APIを作成した人にドメインのcorsを有効にするように依頼します

CORSはブラウザとターゲットサーバーの間にあるブラウザの制限であるため、axiosで直接CORSを解決できるとは思いません。

次のいずれかを実行できます。

1. ターゲットサーバーからの応答ヘッダーにAccess-Control-Allow-Originを含めます。
2. 元のサーバーを要求するように、axios要求にホスト名を含めないでください。 次に、元のサーバーから、ターゲットサーバーに対してやりたいことを何でも行うことができます。

詳細なサンプルコードスニペットについて言及してください。
彼は役に立ちます。

私は地元でも同じ問題を抱えていました。
バックエンドにcorsを追加して解決しました。 :)

これはaxiosの問題ではありません。これはバックエンドの問題です。 私はDjangoを使用しています。 そして、これら2つを追加すると、問題が解決します。

CORSミドルウェアを追加

MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
...
]

そして、CORSを許可します。
（すべてのCORSを許可）

CORS_ORIGIN_ALLOW_ALL = True

（これはすべてのオリジンを許可するため、少し安全ではありません。CSRF攻撃に対して脆弱になります）
したがって、生産のために特定の起源のみを許可します

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    '<YOUR_DOMAIN>[:PORT]',
)

例：+1：

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    '127.0.0.1:8000',
)

こんにちは、みんな、
すでに述べたように、この問題はクロスオリジンリクエストに対するブラウザの保護です。 私はこれらの指示に従ってそれを解決しました： https ：

まだ苦労している人のために：
これがAxiosの問題ではなく、サーバーによってヘッダーが設定されていないためにブラウザーがCORSをブロックしていることを理解していただければ幸いです。 これを理解していて、自分のサーバーがヘッダーを設定しないという問題がまだ発生する場合は、リバースプロキシを使用するときに必ず実際のWebサーバーにヘッダーNGINXで設定する方法については、

まだ苦労している人のために：
これがAxiosの問題ではなく、サーバーによってヘッダーが設定されていないためにブラウザーがCORSをブロックしていることを理解していただければ幸いです。 これを理解していて、自分のサーバーがヘッダーを設定しないという問題がまだ発生する場合は、リバースプロキシを使用するときに必ず実際のWebサーバーにヘッダーNGINXで設定する方法については、

私は3時間苦労しましたが、クライアント側では何も変わりませんでした。最後に、サーバーに次のものを追加しました。

egg-corsをインストールします（eggプロジェクトのみ）

// ./config/config.default.js

config.cors = {
    origin: ["http://localhost:8080"],
    allowedHeaders: [
      "Content-Type",
      "Authorization",
      "Access-Control-Allow-Methods",
      "Access-Control-Request-Headers"
    ],
    credentials: true,
    enablePreflight: true
  };

それで全部です

const board = this.props.routeParams.tag;
axios.get('https://cors-anywhere.herokuapp.com/' + 'https://a.4cdn.org/' + board + '/threads.json', config)
.then(function (response) {
console.log(response.data);
});

fetchを使用して、サーバーのcorsが最初に機能するかどうかをテストします。

と...

axiosは私のkoa-server axiosをリクエストできますが、 iris直接リクエストすることはできません。どちらも、人気のあるcors-middlewareを備えています。

1358

これは私のために働いたので、理由を学ぶ必要があります

私はTornadoとVuejsを使用していましたが、バックエンドではaxiosは問題ではありませんでした。

# Tornado
class ClassName(tornado.web.RequestHandler):
    def set_default_headers(self):
        self.set_header("Content-Type", "application/json")
        self.set_header("Access-Control-Allow-Origin", "*")
        self.set_header("Access-Control-Allow-Headers", "content-type")
        self.set_header(
            'Access-Control-Allow-Methods',
            'POST, GET, OPTIONS, PATCH, PUT'
        )

@robertjchristian
それは働いた
Verrrrrrrrrrryありがとう

私は同じ問題を抱えています
私のコード
axios（{
メソッド： "get"、
url： "http：// localhost：4000 / users"、
}）
.then（response => {
console.log（response）;
}）
.catch（エラー=> {
console.log（エラー）
}）;
}
このエラーが発生する
起点 ' http：// localhost ：3000'からの ' http：// localhost ：4000 / users'でのXMLHttpRequestへのアクセスはCORSポリシーによってブロックされています：プリフライトリクエストへの応答はアクセス制御チェックに合格しません：いいえ 'Access-Control -Allow-Origin 'ヘッダーが要求されたリソースに存在します。

誰かが私に何をすべきかについて段階的な解決策を教えてもらえますか？

@albertpintoまず、

@albertpintoは、このメガスレッドで考えられるすべての解決策を調べます。 これは、クライアント側/フロントエンドの問題ではなく、実際にはサーバー（localhost：4000）です。 サーバーは、オリジンを許可するためにCORSヘッダーで応答する必要があります。

たとえば、サーバーは次のようなヘッダーで応答する必要があります。

Access-Control-Allow-Origin:  *
Access-Control-Allow-Headers: Content-Type

私はこれを次のように解決しました：

1. cors npmをインストールします：npm install cors（私の場合はRESTノードサーバーにhttp：// localhost：4000）

これはあなたのエンドポイントにも当てはまります：
var cors = require（ 'cors'）
var express = require（ 'express'）
var cors = require（ 'cors'）
var app = express（）
app.use（cors（））

すべての提案をありがとう！

// CORSの場合、express jsを使用すると、npmを介してcorsパッケージを使用できます。

app.use(
    cors({
        credentials: true,
        origin: [
            'http://localhost:8080',
            'http://your-production-website.com'
        ]
    }),
)

cURLはCORSルールを適用しません。 これらのルールは、セキュリティの目的でブラウザによって適用されます。

関連するヘッダーを追加したと言うときは、それらのヘッダーをリクエストに追加したことを意味していると思います。 実際には、ヘッダーはサーバーからの応答ヘッダーで予期されており、リソースが他のWebサイトから直接アクセスできることを示しています。

参考までに、CORS-クロスオリジンリソースシェアリング。 APIはそれをサポートしていないため、2つのオプションがあります-

1. Webページと同じドメインのプロキシサーバーを使用して4chanのAPIにアクセスするか、
2. 他のドメインでプロキシサーバーを使用しますが、必要なヘッダーが含まれるように応答を変更します。

この問題を「問題ではない」としてクローズすることに投票したいと思います。

@sunnykgupta
同じロジック、同じボディですが、リモートバックエンドエンドポイントへの角度のあるhttpポストリクエストがCORSブロックエラーを受信しません

Goサーバーを実行している場合は、 Gorillaの使用をお勧めします

headersOk := handlers.AllowedHeaders([]string{"X-Requested-With", "Content-Type"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})

err := http.ListenAndServe("localhost:8081", handlers.CORS(originsOk, headersOk, methodsOk)(r))

私はこれを次のように解決しました：

1.プロジェクトのルートのpackage.jsonのすぐ横にvue.config.jsファイルを作成します。これには次のものが含まれます。

module.exports = {
    devServer:{
        proxy: {
            '/apiv1': {
                target: 'https://fuping.site/',
                changeOrigin: true,
                pathRewrite: {
                    '^/apiv1': ''
                }
            },
        },
    }
}

2.次のようなhttpリクエストを作成します。

this.$axios({
          method:'get',
          url:'apiv1/about/',

        }).then(function(response){
          console.log(response.data)
        }).catch(error=>{
          console.log(error)
        })

axios.get（ 'https://a.4cdn.org/a/threads.json'、{
ヘッダー：{
'Access-Control-Allow-Origin'： '*'、
'Access-Control-Allow-Headers'： 'Content-Type、Authorization'、
}、
プロキシー： {
ホスト： '104.236.174.88'、
ポート：3128
}
}）。then（function（response）{
console.log（ '応答は：' + response.data）;
}）。catch（function（error）{
if（error.response）{
console.log（error.response.headers）;
}
else if（error.request）{
console.log（error.request）;
}
そうしないと {
console.log（error.message）;
}
console.log（error.config）;
}）;

こんにちは、みんな、
これを解決するのに何時間もかかったので、私はこれを投稿しています。

まず第一に、CORSは間違いなくサーバー側の問題であり、クライアント側の問題ではありませんが、他のアプリが異なるドメインで同じサーバーを使用して動作していたため、私の場合はサーバーコードが正しいことを確信していました。 この問題は、カスタムインスタンスでaxiosを使い始めたときに始まりました。

私の場合、 axiosインスタンスでbaseURLを使用してから、どこからでもGETまたはPOST呼び出しを行おうとすると、非常に特殊な問題になりました。 axiosは、 baseURLとリクエストURLの間にスラッシュ/ axios追加します。 これも理にかなっていますが、それは隠れた問題でした。 私のLaravelサーバーは、この問題の原因となっている末尾のスラッシュを削除するようにリダイレクトしていました。

一般に、飛行前のOPTIONSリクエストはリダイレクトを好みません。 だから、間違いなくそれをチェックし、それを避けてください。

バグではありませんが、これが誰かに役立つことを願っています。