まず、クロスドメインとは何かを最初に理解する必要がありますか?
- クロスドメインの問題は、セキュリティのためにブラウザによって実装された同じオリジンポリシーによって引き起こされます。同じオリジンポリシーは、異なるソースからのドキュメントとスクリプトを制限します。
- クロスドメインとは、ブラウザが他のWebサイトのスクリプトを実行できないことを意味します。これは、ブラウザの同じオリジンポリシーが原因であり、ブラウザによって課せられるセキュリティ制限です。
相同性とは何ですか?
- 同じオリジンは、ドメイン名、プロトコル、およびポート番号が同じであることを意味します
クロスドメインの問題があるのはなぜですか?
クロスドメインとは、aがページbのリソースを取得したいページを指しますが、現時点では、ページaとbのプロトコル、ドメイン名、ポート、およびサブドメイン名が異なるか、ページaがIPアドレスで、ページbがドメイン名アドレスです。アクションはクロスドメインであり、ブラウザーは通常、セキュリティ上の理由からクロスドメインアクセスを制限します。つまり、リソースに対するクロスドメイン要求は許可されません=
例えば:
ドメイン名:
メインドメイン名が異なりますhttp://www.baidu.com/index.html->http://www.sina.com/test.js
サブドメイン名が異なりますhttp://www.666.baidu.com/index .html-> http://www.555.baidu.com/test.js
ドメイン名とドメイン名iphttp://www.baidu.com/index.html-> http://180.149.132.47/test js
ポート:
http ://www.baidu.com :8080 / index.html–> http://www.baidu.com:8081/test.js
プロトコル:
http ://www.baidu.com :8080 / index .html–> https://www.baidu.com:8080/test.js
備考:
1。ポートとプロトコルは異なり、バックグラウンドでのみ解決できます。2。localhost
と127.0.0.1はどちらもローカルマシンを指しますが、これらも同じです。クロスドメイン
の解き方?
バックエンドソリューション:CorsConfig構成クラスを確立する
@Configuration
public class CorsConfig extends WebMvcConfigurationSupport {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 配置可以被跨域的路径,可以任意配置,可以具体到直接请求路径。
.allowedMethods("*") // 允许所有的请求方法访问该跨域资源服务器,如:POST、GET、PUT、DELETE等。
.allowedOrigins("*") // 允许所有的请求域名访问我们的跨域资源,可以固定单条或者多条内容,
// 如:“http://www.aaa.com”,只有该域名可以访问我们的跨域资源。
.allowedHeaders("*"); // 允许所有的请求header访问,可以自定义设置任意请求头信息。
super.addCorsMappings(registry);
}
コントロールレイヤーのインターフェイスメソッドは、@ CrossOriginの通常のフロントエンドリクエストを追加することで、クロスドメインの問題を解決できます。