Spring Boot: Cara Menyelesaikan Isu Silang Asal

Huraian Isu Silang Asal

Anda mungkin menghadapi mesej ralat berikut:

telah disekat oleh dasar CORS: Tiada pengepala 'Access-Control-Allow-Origin' pada sumber yang diminta

Ralat ini menunjukkan bahawa permintaan ke alamat tertentu telah disekat oleh protokol CORS kerana pengepala Access-Control-Allow-Origin tiada daripada sumber.

Menganalisis Isu Silang Asal

Punca isu silang asal ialah penyemak imbas, atas sebab keselamatan, menyekat akses kepada sumber di luar tapak semasa.

Sebagai contoh, pertimbangkan tapak web yang dihoskan di http://127.0.0.1:8080/ dengan halaman tertentu. Jika anda mengakses sumber dari tapak yang sama, tiada sekatan. Tetapi jika anda cuba mengakses sumber daripada tapak lain (cth., http://127.0.0.1:8081), penyemak imbas akan menyekat permintaan itu.

Nota: Kami menganggap protokol, domain dan port sebagai sebahagian daripada mentakrifkan "asal yang sama."

Elemen dengan atribut src, seperti img dan teg skrip, tidak tertakluk pada sekatan ini.

Secara sejarah, apabila bahagian hadapan dan bahagian belakang tidak berasingan, halaman dan antara muka permintaan wujud di bawah domain dan port yang sama. Penyemak imbas kemudiannya membenarkan permintaan daripada halaman yang dihoskan pada satu domain untuk meminta sumber daripada domain yang sama.

Sebagai contoh, http://127.0.0.1:8080/index.html boleh meminta http://127.0.0.1:8080/a/b/c/userLit secara bebas.

Kini, dengan bahagian hadapan dan bahagian belakang dipisahkan kepada aplikasi yang berbeza, ini tidak dibenarkan dan akan mencetuskan isu CORS.

Apakah Origin dan Cross-Origin?

Asal (atau sumber) terdiri daripada protokol, domain dan nombor port.

URL terdiri daripada protokol, domain, port dan laluan. Dua URL dianggap "asal yang sama" jika protokol, domain dan portnya semuanya sama. Sebarang perbezaan dalam mana-mana daripada tiga elemen ini merupakan permintaan silang asal.

Pertimbangkan perbandingan silang asal untuk https://www.baidu.com/index.html:

URL	Cross-Origin	Reason
https://www.baidu.com/more/index.html	No	Same protocol, domain, and port
https://map.baidu.com/	Yes	Different domain
http://www.baidu.com/index.html	Yes	Different protocol
https://www.baidu.com:81/index.html	Yes	Different port

Apakah Dasar Asal Sama?

Dasar Asal Sama ialah ciri keselamatan pelayar asas. Tanpanya, kefungsian biasa penyemak imbas mungkin berisiko. Seni bina web sangat bergantung pada dasar ini dan penyemak imbas melaksanakannya untuk memastikan keselamatan.

Dasar Asal Sama termasuk:

1. Dasar Asal Sama DOM: Menghalang manipulasi DOM bagi halaman asal yang berbeza. Terpakai terutamanya pada senario iframe silang asal yang mana iframe domain berbeza tidak boleh mengakses satu sama lain.
2. Dasar XMLHttpRequest Same-Origin: Melarang permintaan HTTP ke asal yang berbeza menggunakan objek XHR.

Menyelesaikan Isu Silang Asal dalam But Spring

1. Mencipta Penapis untuk Mengendalikan CORS

Dalam projek di mana bahagian hadapan dan bahagian belakang digunakan secara berasingan, menangani CORS adalah penting. Kuki digunakan untuk menyimpan maklumat log masuk pengguna, dan pemintas Spring mengurus kebenaran. Isu timbul apabila pemintas dan CORS diproses dalam susunan yang salah, menyebabkan ralat CORS.

Permintaan HTTP terlebih dahulu melalui penapis sebelum mencapai servlet dan kemudian pemintas. Untuk memastikan pemprosesan CORS berlaku sebelum pemintasan kebenaran, kami boleh meletakkan konfigurasi CORS dalam penapis.

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

2. Mengkonfigurasi CORS dalam WebMvcConfigurer

Walaupun JSONP boleh menangani isu silang asal pada bahagian hadapan, ia hanya menyokong permintaan GET, yang mengehadkan dalam aplikasi RESTful. Sebaliknya, anda boleh mengendalikan permintaan silang asal dengan Perkongsian Sumber Silang (CORS) di bahagian belakang. Penyelesaian ini bukan unik untuk Spring Boot dan telah digunakan dalam rangka kerja SSM tradisional. Anda mengkonfigurasinya dengan melaksanakan antara muka WebMvcConfigurer dan mengatasi kaedah addCorsMappings.

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .maxAge(3600);
    }
}

3. Mengkonfigurasi CORS dalam Pengawal

Anda boleh mendayakan CORS untuk kaedah pengawal tertentu dengan menambahkan anotasi @CrossOrigin pada anotasi @RequestMapping. Secara lalai, @CrossOrigin membenarkan semua asal dan kaedah HTTP yang dinyatakan dalam @RequestMapping.

@RestController
@RequestMapping("/account")
public class AccountController {

    @CrossOrigin
    @GetMapping("/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }

    @DeleteMapping("/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }
}

Memahami Parameter @CrossOrigin：

• @CrossOrigin tanpa parameter membenarkan semua URL mengakses.
• @CrossOrigin(origins = "http://127.0.0.1:8080") mengehadkan akses kepada URL yang ditentukan.
• Anotasi ini boleh digunakan pada kelas atau kaedah.
• Atribut nilai atau asal usul menentukan URL yang dibenarkan.
• maxAge menunjukkan umur maksimum dalam saat untuk cache permintaan prapenerbangan.
• allowCredentials menunjukkan sama ada bukti kelayakan (kuki) dibenarkan. Lalai adalah palsu.
• allowedHeaders menentukan pengepala permintaan yang dibenarkan.
• kaedah menentukan kaedah permintaan yang dibenarkan, lalai ialah GET, POST, HEAD.

Sebab @CrossOrigin Mungkin Tidak Berfungsi

1. Versi MVC musim bunga mestilah 4.2 atau lebih tinggi untuk menyokong @CrossOrigin.
2. Permintaan yang salah mungkin muncul sebagai isu silang asal disebabkan oleh respons pelayan yang tidak betul.
3. Jika menambahkan @CrossOrigin di atas anotasi Pengawal masih mengakibatkan isu, satu penyelesaian yang mungkin adalah dengan menentukan kaedah HTTP dalam @RequestMapping.

Contoh:

@CrossOrigin
@RestController
public class PersonController {

    @RequestMapping(method = RequestMethod.GET)
    public String add() {
        // some code
    }
}

Atas ialah kandungan terperinci Spring Boot: Cara Menyelesaikan Isu Silang Asal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!