web-dev-qa-db-ja.com

「リダイレクトがCORSポリシーによってブロックされました：「Access-Control-Allow-Origin」ヘッダーがありません」の解決方法

vue jsを使用してアプリを作成しています。私の設定によれば、設定が変更されたときにURLに変数を渡す必要があります。

$.get('http://172.16.1.157:8002/firstcolumn/' + c1v + '/' + c1b, function (data) { 
  // some code...
});

しかし、アプリがURLにヒットすると、次のメッセージが表示されます。

ロードに失敗しました http://172.16.1.157:8002/firstcolumn/2017-03-01/2017-10-26 ：「 http://172.16.1.157:8002からのリダイレクト」/firstcolumn/2017-03-01/2017-10-26 'から' http://172.16.1.157:8002/firstcolumn/2017-03-01/2017-10-26/ = 'CORSポリシーによってブロックされました：要求されたリソースに' Access-Control-Allow-Origin 'ヘッダーがありません。したがって、Origin ' http：// localhost：808 'はアクセスを許可されません。

javascriptjqueryvuejs2
34
Sharat

サーバーの責任者を再構成するためにawdが言及したことに加えて（ローカル開発の非現実的なソリューション）、次のようなchange-Origin chromeプラグインを使用します。

https://chrome.google.com/webstore/detail/moesif-Origin-cors-change/digfbfaphojjndkpccljibejjbppifbc

local dev server (ex: localhost:8080)を172.16.1.157:8002 or any other domainから来ているように見せることができます。

29
altShiftDev

おかげで、クロムのこの拡張機能で解決しました。

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

11
Sharat

http://172.16.1.157:8002/ でサーバーを管理している人に、ホスト名をAccess-Control-Allow-Originホストに追加するように依頼すると、サーバーは次のようなヘッダーを返します。応答-

Access-Control-Allow-Origin: yourhostname:port
8
awd

こんにちはページが表示されているドメインとは異なるドメインに対して XMLHttpRequest を実行していることを正しく理解できた場合。そのため、通常はセキュリティ上の理由から同じオリジンでリクエストを許可するため、ブラウザはそれをブロックしています。クロスドメインリクエストを行う場合は、別のことを行う必要があります。それを達成する方法に関するチュートリアルは、 CORSを使用 です。

郵便配達員を使用している場合、郵便配達員はこのポリシーによって制限されません。 Cross-Origin XMLHttpRequest ：から引用

通常のWebページはXMLHttpRequestオブジェクトを使用してリモートサーバーとデータを送受信できますが、同じOriginポリシーによって制限されます。拡張機能はそれほど制限されていません。拡張機能は、最初にクロスオリジンパーミッションを要求する限り、オリジンの外部にあるリモートサーバーと通信できます。

4
Bhavan Patel

ローカル開発サーバーから外部ドメイン172.16.1.157:8002/にリクエストを送信しているため、クロスオリジン例外が発生しています。フロントエンドとバックエンドの両方でヘッダーAccess-Control-Allow-Origin:*を許可するか、代わりにこの拡張機能を使用する必要があります cors header toggle-chrome extension 同じドメインでバックエンドとフロントエンドをホストしない限り。

3
Manav Mandal

Apacheを使用してヘッダーにCORS承認を追加するには、サーバー構成の<Directory>、<Location>、<Files>、または<VirtualHost>セクション（通常はhttpd.confやApache.confなどの* .confファイルにあります）内に次の行を追加するだけです）、または.htaccessファイル内：

ヘッダーセットAccess-Control-Allow-Origin "*"

次に、Apacheを再起動します。

ヘッダーを変更するには、mod_headersを使用する必要があります。 mod_headersはApacheでデフォルトで有効になっていますが、有効にすることをお勧めします。

3
Pankaj Shinde

Vue.jsとSpringBootプロジェクトでも同じ問題がありました。誰かが春で作業する場合、次のコードを追加できます：

@Bean
public FilterRegistrationBean simpleCorsFilter() {  
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();  
    CorsConfiguration config = new CorsConfiguration();  
    config.setAllowCredentials(true); 
    // *** URL below needs to match the Vue client URL and port ***
    config.setAllowedOrigins(Collections.singletonList("http://localhost:8080")); 
    config.setAllowedMethods(Collections.singletonList("*"));  
    config.setAllowedHeaders(Collections.singletonList("*"));  
    source.registerCorsConfiguration("/**", config);  
    FilterRegistrationBean bean = new FilterRegistrationBean<>(new CorsFilter(source));
    bean.setOrder(Ordered.HIGHEST_PRECEDENCE);  
    return bean;  
}

この記事で解決策を見つけました Spring BootとVue.jsを使用してシンプルなCRUDアプリを構築する

1
mma

サーバーを制御できる場合は、PHPを使用できます。

<?PHP
header('Access-Control-Allow-Origin: *');
?>
1
Kardi Teknomo

ブラウザのセキュリティをカスタマイズするか、セキュリティをカスタマイズして許可を与える必要があります。 （ローカルテストでは非実用的です）詳細については、リンクを参照してください。
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

0
Aditya M

この一時的な問題は、FirefoxアドオンCORS Everywhereを使用して解決できます。 Firefoxを開いてCtrl + Shift + Aを押し、アドオンを検索して追加してください!!

0
Prabhash Rathnayake

ノードjs（apiを作成）を使用している場合、唯一の最適なソリューションは、

step1：-npm i cors step2：-app.use（cors（））{app.jsファイル内}その後、サーバーを再度実行しますあなたの解決策...ビデオについては、YouTubeチャンネルにアクセスして購読してください https://www.youtube.com/channel/UCD8bHKf3eRE0bAWShADWAYw

0
Muo sigma classes