vue jsを使ったアプリを作っています。 私の設定によると、設定が変更されたときにURLに変数を渡す必要があります。
$.get('http://172.16.1.157:8002/firstcolumn/' + c1v + '/' + c1b, function (data) {
// some code...
});
というメッセージが表示されます。
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'ヘッダが存在しません。したがって、オリジン 'http://localhost:8080'へのアクセスは許可されていません。
awdが言っていた、サーバーの責任者に再設定してもらう(ローカル開発では現実的な解決策ではない)に加えて、私はこのようなchange-origin chromeプラグインを使っている:
https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc
ローカルの開発サーバー (例: localhost:8080)が、
172.16.1.157:8002 またはその他のドメイン`から来ているように見せることができます。
ありがとうございます。クロムのこの拡張機能で解決しました。
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi。
こんにちは、私の理解が正しければ、あなたはあなたのページとは異なるドメインにXMLHttpRequestを実行しています。そのため、ブラウザはセキュリティ上の理由から、通常は同じオリジンでのリクエストを許可するので、それをブロックしているのです。クロスドメインリクエストを行いたい場合は、別の方法を取る必要があります。その方法についてのチュートリアルはUsing CORSです。
postman を使用している場合は、このポリシーによる制限はありません。Cross-Origin XMLHttpRequest]3 より引用:
**通常のウェブページはXMLHttpRequestオブジェクトを使ってリモートサーバとデータを送受信できますが、同じオリジンポリシーによって制限されます。拡張機能はそれほど制限されていません。拡張機能は、最初にクロスオリジンのパーミッションを要求する限り、オリジン外のリモートサーバーと通信することができます。
Apacheを使用してヘッダーにCORS認証を追加するには、 < Directory>
、< Location>
、< Files>
または< VirtualHost>
セクション内に次の行を追加するだけです。サーバー構成(通常はhttpd.confやapache.confなどの* .confファイルにあります)
ヘッダーセットAccess-Control-Allow-Origin "*"。
そして、apacheを再起動します。
ヘッダーを変更するには、mod_headersを使用する必要があります。 Mod_headersはデフォルトでApacheで有効になっていますが、有効になっていることを確認したい場合があります。
ローカル開発サーバーから外部ドメイン 172.16.1.157:8002 /
にリクエストを行っているため、クロスオリジン例外が発生しています。
同じドメインでバックエンドとフロントエンドをホストしない限り、フロントエンドとバックエンドの両方でヘッダー Access-Control-Allow-Origin:*
を許可するか、この拡張機能[コースヘッダートグル-クロム拡張][1]を使用する必要があります。
[1]:https://chrome.google.com/webstore/detail/cors-toggle/omcncfnpmcabckcdookmnajignpffnh?hl = en。
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アプリを構築。
このコマンドを端末で実行してから、もう一度テストしてください。
curl -H "origin:originHost" -v "RequestedResource"。
``。
例:
私の `originHost`が `https://localhost:8081 /`に等しく、私の `RequestedResource`が `https://example.com/`に等しい場合。
私のコマンドは以下のとおりです。
```なし。
curl -H "origin:https://localhost:8081 /" -v "https://example.com/"。
``。
次の行に気付く場合は、うまくいくはずです。
**< access-control-allow-origin:***。
これが役立つことを願っています。
$.get('https://172.16.1.157:8002/firstcolumn/' + c1v + '/' + c1b, function (data) {
// some code...
});
「https」と入力してください。 .